用仿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;  
        }  
    }  
}

以上就是用仿ActionScript的語法來編寫html5－第七篇，自訂按鈕的內容，更多相關內容請關注PHP中文網（www.php.cn）！