Using the syntax of ActionScript to write the second html5--, using a sprite to achieve animation

This paper is the official HTML5 training course for Brother Lian it educational institution, mainly introduces: writing html5--with the syntax of ActionScript, using Sprite to realize animation

In the previous article, I have imitated as, joined the Lbitmap and Lbitmapdata classes, and used them to achieve the display of static pictures.
This time use a sprite to animate the picture.
Still follow the previous idea of handling the display object, add the Lsprite class, and append the Show method, as follows:

[JavaScript]View PlainCopy

2. function Lsprite () {
4. var = this ;
6. Self.type = "Lsprite";
8. self.x = 0;
10. SELF.Y = 0;
12. Self.visible=true;
14. Self.childlist = new Array ()
16. }
18. Lsprite.prototype = {
20. Show:function (cood) {
22. if (cood==null) cood={x:0,y:0};
24. var = this ;
26. if (!self.visible)return;
28. Lglobal.show (Self.childlist,{x:self.x+cood.x,y:self.y+cood.y});
30. },
32. AddChild:function (displayobject) {
34. var = this ;
36. Self.childList.push (Displayobject);
38. }
40. }

Because the sprite can have other visible objects such as pictures, I added Childlist in its constructor to hold all the objects above it. Then, when invoking its own Show method, it lglobal its sub-objects in a loop.
In this way, the code for the image shown in our previous article can also be displayed with a Sprite, with the following code:

[JavaScript]View PlainCopy

2. function Main () {
4. Loader = new Lloader ();
6. Loader.addeventlistener (Levent.complete,loadbitmapdata);
8. Loader.load ("1.png","BitmapData");
10. }
12. function Loadbitmapdata (event) {
14. var bitmapdata = new Lbitmapdata (loader.content);
16. var mapimg = new Lbitmap (BitmapData);
20. var backlayer = new Lsprite ();
22. AddChild (Backlayer);
24. Backlayer.addchild (MAPIMG);
26. }

We know that the sprite in ActionScript can add the Enterframe event to animate the picture, and I'll imitate it here, because the Show method in the Lsprite class is constantly looping, so I just need to call a method in the Show method constantly, You can make it loop.
I assume that there is an array that stores all the methods that are constantly looping, and then I can loop through the array in the Show method, so that the loop of all the methods is reached, see below

[JavaScript]View PlainCopy

2. function Lsprite () {
4. var = this ;
6. Self.type = "Lsprite";
8. self.x = 0;
10. SELF.Y = 0;
12. Self.visible=true;
14. Self.childlist = new Array ()
16. Self.framelist = new Array ();
18. }
20. Lsprite.prototype = {
22. Show:function (cood) {
24. if (cood==null) cood={x:0,y:0};
26. var = this ;
28. if (!self.visible)return;
30. Lglobal.show (Self.childlist,{x:self.x+cood.x,y:self.y+cood.y});
32. Self.loopframe ();
34. },
36. Loopframe:function () {
38. var = this ;
40. var key;
42. For (key in self.framelist) {
44. Self.framelist[key] ();
46. }
48. },
50. AddChild:function (displayobject) {
52. var = this ;
54. Self.childList.push (Displayobject);
56. }
58. }

The light hypothesis is certainly not possible, we need to have a way to add this loop event, so we also need to addeventlistener the method, and the RemoveEventListener method to remove the event

[JavaScript]View PlainCopy

2. AddEventListener:function (type,listener) {
4. var = this ;
6. if (type = = Levent.enter_frame) {
8. Self.frameList.push (listener);
10. }
12. },
14. RemoveEventListener:function (type,listener) {
16. var = this ;
18. var i,length = self.frameList.length;
20. For (i=0;i<length;i++) {
22. if (type = = Levent.enter_frame) {
24. Self.frameList.splice (i,1);
26. Break ;
28. }
30. }
32. }

The addition is added, then, to simply implement a character's walking diagram
First, add a few methods to the BitmapData class to change the location of the image display area, etc.

[JavaScript]View PlainCopy

2. Lbitmapdata.prototype = {
4. SetProperties:function (x,y,width,height) {
6. var = this ;
8. self.x = x;
10. Self.y = y;
12. Self.width = width;
14. Self.height = height;
16. },
18. Setcoordinate:function (x, y) {
20. var = this ;
22. self.x = x;
24. Self.y = y;
26. }
28. }

All right, now, prepare a picture of a man's walk, and let it move.

[JavaScript]View PlainCopy

2. var list = new Array ();
4. var index = 0;
6. var mapimg;
8. var loader
10. var Imagearray;
12. var animeindex = 0;
14. var dirindex = 0;
16. var Dirarr = New Array ({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1});
18. function Main () {
20. Loader = new Lloader ();
22. Loader.addeventlistener (Levent.complete,loadbitmapdata);
24. Loader.load ("1.png","BitmapData");
26. }
28. function Loadbitmapdata (event) {
30. var bitmapdata = new Lbitmapdata (loader.content,0,0,70,92);
32. Imagearray = Lglobal.dividecoordinate (bitmapdata.image.width,bitmapdata.image.height,8,8);
34. mapimg = new Lbitmap (BitmapData);
36. mapimg.x = 100;
38. Mapimg.bitmapData.setCoordinate (0,0);
40. index = 0;
42. var backlayer = new Lsprite ();
44. AddChild (Backlayer);
46. Backlayer.addchild (MAPIMG);
48. Backlayer.addeventlistener (Levent.enter_frame, Onframe)
50. }
56. function Onframe () {
58. index++;
60. if (index >= imagearray[0].length) {
62. index = 0;
64. }
66. Mapimg.bitmapData.setCoordinate (IMAGEARRAY[DIRINDEX][INDEX].X,IMAGEARRAY[DIRINDEX][INDEX].Y);
70. mapimg.x + = dirarr[dirindex].x*3;
72. Mapimg.y + = dirarr[dirindex].y*3;
74. if (animeindex++ >) {
76. dirindex++;
78. if (Dirindex > 3) dirindex = 0;
80. Animeindex = 0;
82. }
84. }

Using the syntax of ActionScript to write the second html5--, using a sprite to achieve animation