用仿ActionScript的语法来编写html5——第七篇，自定义按钮

第七篇，自定义按钮

这次弄个简单点的，自定义按钮。
其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。
下面是添加按钮的代码，

function gameInit(event){backLayer = new LSprite();addChild(backLayer);btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));btn01.x = 76;btn01.y = 50;backLayer.addChild(btn01);btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"])));btn02.x = 76;btn02.y = 100;backLayer.addChild(btn02);btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01);btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02);
}
function onmousedown01(event){alert("btn01 on click");
}
function onmousedown02(event){alert("btn02 on click");
}

原理：建立一个继承自LSprite的LButton类，给按钮设定两个图片，然后侦听鼠标位置，当鼠标移动到按钮上的时候，变换按钮状态，就是一个简单的按钮。

这里，我用mousemove来侦听鼠标位置，给LGlobal类添加一个buttonList数组，当创建按钮的时候，把按钮加入到buttonList，然后当移动鼠标的时候，就可以从buttonList数组判断鼠标是否在按钮上，然后当按钮被删除后，将按钮从buttonList数组中删除。

一些修改：
1，修改LSprite类，添加die方法，每个LSprite当被removeChild的时候，调用自己的die方法，die方法里放一些被移除是必需处理的事件，比如这次的按钮，要从buttonList中删除。
2，给每个构造器添加objectindex，用来区分每个对象。
3，修改addChild方法，添加DisplayObject.parent = self，就是给每个自对象指定父级对象。

准备完毕，开始创建按钮类LButton。

function LButton(bitmap_up,bitmap_over){base(this,LSprite,[]);var self = this;self.type = "LButton";self.bitmap_up = bitmap_up;self.addChild(bitmap_up);if(bitmap_over == null){bitmap_over = bitmap_up;}else{self.addChild(bitmap_over);}self.bitmap_over = bitmap_over;self.bitmap_over.visible = false;self.bitmap_up.visible = true;LGlobal.buttonList.push(self);
}LButton.prototype.buttonModeChange = function (){var self = this;var cood={x:0,y:0};var parent = self.parent;while(parent != "root"){cood.x += parent.x;cood.y += parent.y;parent = parent.parent;}if(self.ismouseon(LGlobal.mouseMoveEvent,cood)){self.bitmap_up.visible = false;self.bitmap_over.visible = true;}else{self.bitmap_over.visible = false;self.bitmap_up.visible = true;}
}
LButton.prototype.die = function (){var self = this;arguments.callee.super.die.call(this);for(var i=0;i<LGlobal.buttonList.length;i++){if(LGlobal.buttonList[i].objectindex == self.objectindex){LGlobal.buttonList.splice(i,1);break;}}
}

看一下成果吧,看不到效果的请下载支持html5的浏览器

http://fsanguo.comoj.com/html5/jstoas06/index.html

用仿ActionScript的语法来编写html5——第七篇，自定义按钮相关推荐

html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动...
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
用仿ActionScript的语法来编写html5——第五篇，Graphics绘图
用仿ActionScript的语法来编写html5--第五篇,Graphics绘图用仿ActionScript的语法来编写html5--第一篇,显示一张图片 http://blog.csdn.net ...
用仿ActionScript的语法来编写html5——第六篇，TextField与输入框
用仿ActionScript的语法来编写html5--第六篇,TextField与输入框一,对比 1,html5中首先看看在html5的canvas中的文字显示 var canvas = docu ...
用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件
一,LegendForHtml5Programming1.0库件是什么? 它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称 ...
用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画
上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示. 这次用Sprite来动态显示图片. 依然遵循上一篇对显示对象的处理的思路,添加LSprite类 ...
html5语法参考图片,仿AS语法来写HTML5—第1章，显示一张图片
最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇第一篇 ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
wxWidgets：编写一个应用程序 - 添加一个按钮
wxWidgets:编写一个应用程序 - 添加一个按钮 wxWidgets:编写一个应用程序 - 添加一个按钮 wxWidgets:编写一个应用程序 - 添加一个按钮感谢您阅读本教程至少到此为止.在 ...

用仿ActionScript的语法来编写html5——第七篇，自定义按钮

用仿ActionScript的语法来编写html5——第七篇，自定义按钮相关推荐

最新文章

热门文章