[ 登录注册 ]

HTML5

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

2016/08/17 14:11 [db:作者] 返回上一页

 

第七篇,自定义按钮

 

 

这次弄个简单点的,自定义按钮。

其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。

下面是添加按钮的代码,

www.2cto.com

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

 


摘自 lufy小屋
点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377722.html
评论
发表评论