Compiling html5 using the syntax similar to ActionScript -- Article 3: mouse events and movement of game characters

Article 3: html5 & mdash; article 2: Use Sprite to implement animation 1. Assume that all objects that can add mouse events have a mouseEve...

 

Article 3: mouse events and game character Movement

Write html5 with the syntax of the imitation of the ActionScript-article 1,

Write html5 using the syntax similar to ActionScript -- Article 2: Use Sprite to implement animation

 

I. Hypothesis

Assume that all the objects that can add mouse events have a mouseEvent method. The added mouse event is called like this mouseEvent.

In this case, to add a mouse event, you only need to add a mouse event to the canvas, and then loop through childList in the LGlobal class, that is, loop through all the visible objects. If a mouse event is added, then the corresponding method is called.

II. Implementation

1. append the mouseEvent method to the LGlobal class, and modify the setCanvas of the LGlobal class to add and call the canvas mouse event.

 

LGlobal. setCanvas = function (id, width, height ){

LGlobal. canvasObj = document. getElementById (id );

If (width) LGlobal. canvasObj. width = width;

If (height) LGlobal. canvasObj. height = height;

LGlobal. width = LGlobal. canvasObj. width;

LGlobal. height = LGlobal. canvasObj. height;

LGlobal. canvas = LGlobal. canvasObj. getContext ("2d ");

LEvent. addEventListener (LGlobal. canvasObj, LMouseEvent. MOUSE_DOWN, function (event ){

LGlobal. mouseEvent (event, LMouseEvent. MOUSE_DOWN );

});

}

LGlobal. mouseEvent = function (event, type ){

Var key;

For (key in LGlobal. childList ){

If (LGlobal. childList [key]. mouseEvent ){

LGlobal. childList [key]. mouseEvent (event, type );

}

}

}

 

2. Add the mouseList array to the LSprite class to save the added mouse event, and then add the mouseEvent method.

In the mouseEvent method, we need to perform two operations,

1), judge whether you have added a mouse event. If no mouse event is added, cycle its childList

2) if a mouse event is added to determine whether it is clicked, LSprite is visible, but it is invisible at present, what we can see is the Bitmap above it. To be accurate, it is BitmapData In the Bitmap class. To be more accurate, it is the Image in the BitmapData class, so we can determine whether we have been clicked, check whether the visual object in childList in LSprite is clicked. If clicked, call the corresponding method.

 

MouseEvent: function (event, type, cood ){

If (cood = null) cood = {x: 0, y: 0 };

Var self = this;

If (self. mouseList. length = 0 ){

For (key in self. childList ){

If (self. childList [key]. mouseEvent ){

Self. childList [key]. mouseEvent (event, type, {x: self. x + cood. x, y: self. y + cood. y });

}

}

Return;

}

If (self. childList. length = 0) return;

Var key;

Var isclick = false;

For (key in self. childList ){

Isclick = self. childList [key]. ismouseon (event, {x: self. x + cood. x, y: self. y + cood. y });

If (isclick) break;

}

If (isclick ){

For (key in self. mouseList ){

Var obj = self. mouseList [key];

If (obj. type = type ){

Event. selfX = event. offsetX-(self. x + cood. x );

Event. selfY = event. offsetY-(self. y + cood. y );

Event. currentTarget = self;

Obj. listener (event );

}

}

Return;

}

},

Ismouseon: function (event, cood ){

Var self = this;

Var key;

Var isclick = false;

For (key in self. childList ){

Isclick = self. childList [key]. ismouseon (event, {x: self. x + cood. x, y: self. y + cood. y });

If (isclick) break;

}

Return isclick;

}

 

 

Ismouseon method, used to determine whether a user is clicked

In the LBitmap class, you also need to determine whether you have been clicked.

 

Ismouseon: function (event, cood ){

Var self = this;

If (event. offsetX> = self. x + cood. x & event. offsetX <= self. x + cood. x + self. width &&

Event. offsetY> = self. y + cood. y & event. offsetY <= self. y + cood. y + self. height ){

Return true;

} Else {

Return false;

}

}

 

 

When a mouse event is added, it imitates the ActionScript syntax.

 

BackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, onmousedown );

 

 

 

 

Next, prepare a map, a walking chart of a person, and use mouse events to control the movement of the person,

 

Init (80, "back", 800,480, main );

 

 

Var list = new Array ();

Var index = 0;

Var backLayer;

// Map

Var mapimg;

// Character

Var playerimg;

Var loader

Var imageArray;

Var animeIndex = 0;

Var dirindex = 0;

Var dirarr = new Array ({x: 0, y: 1}, {x:-1, y: 0}, {x: 1, y: 0}, {x: 0, y:-1}, {x:-1, y: 1}, {x: 1, y: 1}, {x:-1, y: -1}, {x: 1, y:-1 });

Var dirmark = {"": 0, "-": 1, "": 2, "0,-1": 3, "-": 4, "1, 1": 5, "-1,-1": 6, "1,-1": 7 };

 

 

// Move the target

Var toX = 0;

Var toY = 0;

Function main (){

Loader = new LLoader ();

Loader. addEventListener (LEvent. COMPLETE, loadBitmapdata );

Loader. load ("back.jpg", "bitmapData ");

}

Function loadBitmapdata (event ){

Var bitmapdata = new LBitmapData (loader. content );

Mapimg = new LBitmap (bitmapdata );

Loader = new LLoader ();

Loader. addEventListener (LEvent. COMPLETE, loadOver );

Loader. load ("1.png"," bitmapData ");

}

Function loadOver (event ){

Var bitmapdata = new LBitmapData (loader. content );

ImageArray = LGlobal. divideCoordinate (bitmapdata. image. width, bitmapdata. image. height, 8, 8 );

Document. getElementById ("inittxt"). innerHTML = "";

Playerimg = new LBitmap (bitmapdata );

Playerimg. bitmapData. setCoordinate (0, 0 );

Index = 0;

BackLayer = new LSprite ();

AddChild (backLayer );

BackLayer. addChild (mapimg );

BackLayer. addChild (playerimg );

BackLayer. addEventListener (LEvent. ENTER_FRAME, onframe)

BackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, onmousedown );

}

 

 

Function onframe (){

Index ++;

If (index> = imageArray [0]. length ){

Index = 0;

}

Var markx = 0, marky = 0;

Var l = 3;

If (playerimg. x> toX ){

Playerimg. x-= l;

Markx =-1;

} Else if (playerimg. x <toX ){

Playerimg. x + = l;

Markx = 1;

}

If (playerimg. y> toY ){

Playerimg. y-= l;

Marky =-1;

} Else if (playerimg. y <toY ){

Playerimg. y + = l;

Marky = 1;

}

If (markx! = 0 | marky! = 0 ){

Var mark = markx + "," + marky;

Dirindex = dirmark [mark];

}

Playerimg. bitmapData. setCoordinate (imageArray [dirindex] [index]. x, imageArray [dirindex] [index]. y );

}

Function onmousedown (event ){

ToX = parseInt (event. selfX/3) * 3;

ToY = parseInt (event. selfY/3) * 3;

}

 

 

 

 

Let's take a look at the results.

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

 

From lufy hut