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

 

In the previous article, I copied the as, added the LBitmap and LBitmapData classes, and used them to display static images.

This time, Sprite is used to dynamically display images.

Add the LSprite class and append the show method as follows:

 

Function LSprite (){

Var self = this;

Self. type = "LSprite ";

Self. x = 0;

Self. y = 0;

Self. visible = true;

Self. childList = new Array ()

}

LSprite. prototype = {

Show: function (cood ){

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

Var self = this;

If (! Self. visible) return;

LGlobal. show (self. childList, {x: self. x + cood. x, y: self. y + cood. y });

},

AddChild: function (DisplayObject ){

Var self = this;

Self. childList. push (DisplayObject );

}

}

 

 

Because Sprite can have images and other display objects, I added childList in its constructor to save all objects above it. Then, when calling its own show method, It loops its LGlobal into its sub-object.

In this way, we can use Sprite to display the image code in the previous article. The Code is as follows:

 

Function main (){

Loader = new LLoader ();

Loader. addEventListener (LEvent. COMPLETE, loadBitmapdata );

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

}

Function loadBitmapdata (event ){

Var bitmapdata = new LBitmapData (loader. content );

Var mapimg = new LBitmap (bitmapdata );

Var backLayer = new LSprite ();

AddChild (backLayer );

BackLayer. addChild (mapimg );

}

 

 

We know that Sprite in actionscript can be used to add EnterFrame events to dynamically display images. I will also imitate them here, because the show method in the LSprite class is continuously circulating, I only need to call a method continuously in the show method to make it loop.

I suppose there is an array that stores all the methods that are continuously looping, and then I can loop through this array in the show method, so as to achieve the loop of all methods. Let's look at the following:

 

Function LSprite (){

Var self = this;

Self. type = "LSprite ";

Self. x = 0;

Self. y = 0;

Self. visible = true;

Self. childList = new Array ()

Self. frameList = new Array ();

}

LSprite. prototype = {

Show: function (cood ){

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

Var self = this;

If (! Self. visible) return;

LGlobal. show (self. childList, {x: self. x + cood. x, y: self. y + cood. y });

Self. loopframe ();

},

Loopframe: function (){

Var self = this;

Var key;

For (key in self. frameList ){

Self. frameList [key] ();

}

},

AddChild: function (DisplayObject ){

Var self = this;

Self. childList. push (DisplayObject );

}

}

 

 

We need to add a method to add this cyclic event. Therefore, we also need the addEventListener method and the removeEventListener method to remove this event.

 

AddEventListener: function (type, listener ){

Var self = this;

If (type = LEvent. ENTER_FRAME ){

Self. frameList. push (listener );

}

},

RemoveEventListener: function (type, listener ){

Var self = this;

Var I, length = self. frameList. length;

For (I = 0; I <length; I ++ ){

If (type = LEvent. ENTER_FRAME ){

Self. frameList. splice (I, 1 );

Break;

}

}

}

 

 

All the added items are added. Next, we will simply implement a walking chart of a person.

First, add several methods to the BitmapData class to change the regional position of the image.

 

LBitmapData. prototype = {

SetProperties: function (x, y, width, height ){

Var self = this;

Self. x = x;

Self. y = y;

Self. width = width;

Self. height = height;

},

SetCoordinate: function (x, y ){

Var self = this;

Self. x = x;

Self. y = y;

}

}

 

 

Now, prepare a walking chart for the character. This will make it work.

 

Var list = new Array ();

Var index = 0;

Var mapimg;

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

Function main (){

Loader = new LLoader ();

Loader. addEventListener (LEvent. COMPLETE, loadBitmapdata );

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

}

Function loadBitmapdata (event ){

Var bitmapdata = new LBitmapData (loader. content );

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

Mapimg = new LBitmap (bitmapdata );

Mapimg. x = 100;

Mapimg. bitmapData. setCoordinate (0, 0 );

Index = 0;

Var backLayer = new LSprite ();

AddChild (backLayer );

BackLayer. addChild (mapimg );

BackLayer. addEventListener (LEvent. ENTER_FRAME, onframe)

}

 

 

Function onframe (){

Index ++;

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

Index = 0;

}

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

Mapimg. x + = dirarr [dirindex]. x * 3;

Mapimg. y + = dirarr [dirindex]. y * 3;

If (animeIndex ++> 20 ){

Dirindex ++;

If (dirindex> 3) dirindex = 0;

AnimeIndex = 0;

}

}

 

 

 

 

See the following url for the effect. If the effect is not displayed, download the html5-supported browser.

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

If the source code is used, you can view it in a browser. Everyone on Earth knows it.

From lufy hut