Write html5 with the syntax of the imitation of the ActionScript -- Article 7, Custom button

 

Article 7: Custom buttons

 

 

This is a simple one, Custom button.

In fact, with the previously defined LSprite and LBitmap classes, It is very convenient to define buttons.

The code for adding a button is as follows,

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

}

 

 

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 status is a simple button.

 

 

Here, I use mousemove to listen to the mouse position and add a buttonList array to the LGlobal class. When creating a button, add the button to the buttonList and move the mouse, you can determine whether the mouse is on the button from the buttonList array. After the button is deleted, delete the button from the buttonList array.

 

 

Some modifications:

1. Modify the LSprite class and add the die method. When each LSprite is removeChild, call its own die method. Some removed events in the die method must be processed, for example, this button will be deleted from the buttonList.

2. Add objectindex to each constructor to differentiate each object.

3. Modify the addChild method and add DisplayObject. parent = self to specify the parent object for each self-object.

 

 

After preparation, start to create a 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;

}

}

}

 

 

 

Let's take a look at the results. If there is no effect, download the html5-supported browser.

 

Http://fsanguo.comoj.com/html5/jstoas06/index.html

 

From lufy hut