正文
用仿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
