睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

仿AS语法来写HTML5—第7章,自定义按钮

作者:睿美印象网站建设工作室  发布日期:2012-11-16
 这次弄个简单点的,HTML5自定义按钮。
其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。
下面是添加按钮的代码:

JavaScript Code复制内容到剪贴板
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。

JavaScript Code复制内容到剪贴板
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;  
                }  
        }  
}  
复制代码

转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美