首頁  >  文章  >  web前端  >  用仿ActionScript的語法來寫html5-第七篇,自訂按鈕

用仿ActionScript的語法來寫html5-第七篇,自訂按鈕

黄舟
黄舟原創
2017-01-17 16:56:201265瀏覽

第七篇,自訂按鈕


這次弄個簡單點的,自訂按鈕。
其實,有了前面所定義的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;  
        }  
    }  
}

以上就是用仿ActionScript的語法來編寫html5-第七篇,自訂按鈕的內容,更多相關內容請關注PHP中文網(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn