Write html5 with the syntax of the imitation of ActionScript-Article 4: inheritance and simple rpg

 

Article 4: inheritance and simple rpg

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

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

 

This time, a simple rpg demo is implemented using classes inherited from LSprite.

Let's take a look at the similarity between the final code and the.

 

Var backLayer;

// Map

Var mapimg;

// Character

Var playerimg;

Var loader

Var imageArray;

Var loadIndex = 0;

Var imgData = new Array ({name: "back.jpg", img: null}, {name: "1.png", img: null}, {name:" 2.png", img: null });

Var chara;

Var charaList;

 

 

Function main (){

LoadImage ();

}

Function loadImage (){

If (loadIndex> = imgData. length ){

GameInit ();

Return;

}

Loader = new LLoader ();

Loader. addEventListener (LEvent. COMPLETE, loadComplete );

Loader. load (imgData [loadIndex]. name, "bitmapData ");

}

Function loadComplete (event ){

ImgData [loadIndex]. img = loader. content;

LoadIndex ++;

LoadImage ();

}

Function gameInit (event ){

Var bitmapdata;

Bitmapdata = new LBitmapData (imgData [0]. img );

Mapimg = new LBitmap (bitmapdata );

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

BackLayer = new LSprite ();

AddChild (backLayer );

BackLayer. addChild (mapimg );

Bitmapdata = new LBitmapData (imgData [1]. img );

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

Playerimg = new LBitmap (bitmapdata );

Chara = new CharacterSprite (true, playerimg, imageArray, 0, 0 );

BackLayer. addChild (chara );

 

 

CharaList = new Array ();

For (var I = 0; I <10; I ++ ){

Bitmapdata = new LBitmapData (imgData [2]. img, 0, 80, 91 );

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

Playerimg = new LBitmap (bitmapdata );

Var npcx = parseInt (Math. random () * 800/3) * 3;

Var npcy = parseInt (Math. random () * 480/3) * 3;

Var npc = new CharacterSprite (false, playerimg, imageArray, npcx, npcy );

BackLayer. addChild (npc );

CharaList. push (npc );

}

BackLayer. addEventListener (LEvent. ENTER_FRAME, onframe)

BackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, onmousedown );

}

 

 

Function onframe (){

Chara. onframe ();

For (var I = 0; I <charaList. length; I ++ ){

CharaList [I]. onframe ();

}

}

Function onmousedown (event ){

Chara. toCoordinate. x = parseInt (event. selfX/3) * 3;

Chara. toCoordinate. y = parseInt (event. selfY/3) * 3;

}

 

 

Is that okay?

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

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

 

 

The following describes how to inherit and inherit. js cannot inherit like,

The inheritance of js is as follows:

 

Function base (derive, baseSprite, baseArgs ){

BaseSprite. apply (derive, baseArgs );

For (prop in baseSprite. prototype ){

Var proto = derive. constructor. prototype;

If (! Proto [prop]) {

Proto [prop] = baseSprite. prototype [prop];

}

}

}

 

 

The three parameters are child, base, and base constructor parameter arrays.

This method can achieve the perfect inheritance of js

Create a class CharacterSprite that inherits from LSprite

You only need to call base (this, LSprite, []) in the constructor to implement inheritance.

CharacterSprite inherits the LSprite method, so it has addChild and other methods.

The CharacterSprite class code is as follows:

 

Function CharacterSprite (ishero, bitmap, imageArray, x, y ){

Base (this, LSprite, []);

Var self = this;

Self. x = x;

Self. y = y;

Self. toCoordinate = {x: x, y: y };

Self. ishero = ishero;

Self. animeIndex = 0;

Self. dirindex = 0;

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

Self. bitmap = bitmap;

Self. imageArray = imageArray;

Self. addChild (bitmap );

}

CharacterSprite. prototype. onframe = function (){

Var self = this;

Self. animeIndex ++;

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

Self. animeIndex = 0;

}

Var markx = 0, marky = 0;

Var l = 3;

If (self. x> self. toCoordinate. x ){

Self. x-= l;

Markx =-1;

} Else if (self. x <self. toCoordinate. x ){

Self. x + = l;

Markx = 1;

}

If (self. y> self. toCoordinate. y ){

Self. y-= l;

Marky =-1;

} Else if (self. y <self. toCoordinate. y ){

Self. y + = l;

Marky = 1;

}

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

Var mark = markx + "," + marky;

Self. dirindex = self. dirmark [mark];

} Else if (! Self. ishero ){

If (self. index> 0 ){

Self. index-= 1;

} Else {

Self. index = parseInt (Math. random () * 300 );

Self. toCoordinate. x = parseInt (Math. random () * 800/3) * 3;

Self. toCoordinate. y = parseInt (Math. random () * 480/3) * 3;

}

}

Self. bitmap. bitmapData. setCoordinate (self. imageArray [self. dirindex] [self. animeIndex]. x, self. imageArray [self. dirindex] [self. animeIndex]. y );

}

 

 

Then, prepare the image and follow the initial code to complete adding and moving rpg characters.

 

 

In the next article, I Don't Know What To study. First, try to make a small game and then see what is missing.

 

From lufy hut