用仿ActionScript的文法來編寫html5——第七篇，自訂按鈕

標籤：ace   prot   add   change   知識庫   while   this   list   targe   

第七篇，自訂按鈕


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

用仿ActionScript的文法來編寫html5——第七篇，自訂按鈕