Use ActionScript-like syntax to write html5 - Part 7, custom buttons

Part 7, Custom Button


This time I’ll make it simpler, a custom button.
In fact, with the previously defined LSprite, LBitmap and other classes, it is very convenient to define buttons.
The following is the code for adding a button,

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");  
}

Principle: Create an LButton class inherited from LSprite, set two pictures for the button, and then listen to the mouse position when the mouse moves to the button , changing the button state is a simple button.


Here, I use mousemove to listen to the mouse position, add a buttonList array to the LGlobal class, when creating a button, add the button to the buttonList, and then when the mouse is moved, it can be The buttonList array determines whether the mouse is on the button, and then when the button is deleted, the button is deleted from the buttonList array.


Some modifications:
1. Modify the LSprite class and add a die method. When each LSprite is removedChild, it calls its own die method. It is necessary to put some in the die method to be removed. The event to be processed, such as the button this time, needs to be deleted from the buttonList.
2, add objectindex to each constructor to distinguish each object.
3. Modify the addChild method and add DisplayObject.parent = self, which means assigning a parent object to each self object.


After preparation, start creating the button class 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;  
        }  
    }  
}

The above is to use ActionScript-like syntax to write html5 - Part 7, the content of custom buttons. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!