[HTML5 Game Development] challenge horizontal version Act (1): Huang Zhong's debut

Although I am not a full-time game developer, I have tried to develop various types of Games. However, I have not tried horizontal games, this time, we will use the lufylegend engine to challenge the development of horizontal ACT games,

You can go

Http://lufylegend.com/lufylegend

Download the latest version of lufylegend engine,

As this is the first time that you develop such games, you are welcome to reply and correct your questions.

Directory of this series of articles (updated)

(1): the debut of Huang Zhong

Http://blog.csdn.net/lufy_legend/article/details/8441677

(2): Show your skills

Http://blog.csdn.net/lufy_legend/article/details/8476382

(3): In the face of red faces, heroes are also passionate.

Http://blog.csdn.net/lufy_legend/article/details/8632998

First of all, the problem of materials was found for half a month. He had no choice but to seek help from General Huang zhonghuang. General Huang told me that since he was secretly calculated by Ma Zhong's grandson, I have not been on the battlefield for hundreds of years. Once I heard that I was about to go to the battlefield, I was so excited that I jumped to Jiangnan style and came to the first song "haorangge". the figure is like Li Yu, who is from Liangshan boo. After singing, he copied the guy and shouted: "Go". I didn't dare to neglect it. I quickly picked up the computer and prepared for it. In this estimation, let's take a look at General Huang. If any friend has good materials, he hopes to provide them so that an old General Huang can take a rest.

As General Huang was so excited that he was only eager to rush, he had to use the lanimation object in the lufylegend engine, because the lanimation object can use an image to display the opposite action of the image above.

Considering that there are various soldiers and military commanders on the battlefield, they all belong to people and share some common attributes. Besides, General Huang is too excited to facilitate management and operation, this development is still based on the OOP idea (after hearing this, General Huang said to himself, oh, fart ?), Create a character's parent class character first

function Character(dataList,coordinateList,locationList,speed){base(this,LSprite,[]);};

Let's take a look at these four parameters:

Datalist

Coordinatelist: The lanimation object needs to display images in sequence based on coordinates to form an animation. Even if you want to input a coordinate array of the lanimation object

Locationlist: This array is used to adjust the display position of the corresponding action group image, considering that the image size and position of each action of a character are different.

Speed: easy to control the frequency of a person's movements on the timeline.

The following is the complete constructor of the character class.

Function character (datalist, coordinatelist, locationlist, speed) {base (this, lsprite, []); var self = This; // initialization // action self. action = action. stand; // direction self. direction = direction. right; // Save the parameter self. coordinatelist = coordinatelist; self. locationlist = locationlist; self. datalist = datalist; self. speed = NULL? 1: speed; // Save the image self of the initialization action. data = datalist [action. stand]; self. speedindex = 0; // use the lanimation object to display consistent actions self. anime = new lanimation (self, self. data, self. coordinatelist [0]); self. anime. setaction (0); self. anime. X =-self. data. width * 0.5; self. anime. y =-self. data. height ;};

The action variables and the direction variables are as follows:

// Action var action = {stand: 0, move: 1, run: 2, jump: 3, attack: 4}; // direction var direction = {right: "Right", left: "Left "};

The following describes the lanimation class in detail. The lanimation class creates an animation by playing a group of images in sequence or in reverse order. Its official explanation is as follows:

Lanimation (layer, Data, list) ■ function: to play a simple animation, the principle is to put a large image, display them one by one based on the saved coordinates of the Two-dimensional array with coordinates. ■ Parameter: layer: lsprite display Layer
Data: lbitmapdata object
List: a two-dimensional array containing coordinates

Among the above three parameters, layer is an lsprite object, and data is an lbitmapdata object, which is easy to understand. The third parameter list is a two-dimensional array. Its format is as follows:

[[{x:0,y:0},{x:0,y:0},{x:0,y:0}],[{x:0,y:0},{x:0,y:0},{x:0,y:0}],[{x:0,y:0},{x:0,y:0},{x:0,y:0}]]

The setaction function of the lanimation object, which has four parameters:

Lanimation. setaction (rowindex, colindex, mode, ismirror) parameter: rowindex: Specifies the row number of the playback animation. colindex: Specifies the column number of the playback animation. Mode: (,-1) indicates (Forward playback, static, reverse playback) ismirror: Boolean. When set to true, the image is displayed as an image after horizontal flip.

Of course, it is impossible to have a constructor, because the lanimation object is played by calling the onframe function. Therefore, add a function to the character class, as shown below:

Character. prototype. onframe = function () {var self = This; // If (self. speedindex ++ <self. speed) return; self. speedindex = 0; // the animation of the character to play self. anime. onframe ();};

As a result, as long as you constantly call the onframe function of the character instance, you can achieve dynamic playback.

General Huang may not be interested in the comparison. At this time, he has snore and I must speed up the process ......

Considering that the enemy and us will have different processing methods on the battlefield, create a subclass inherited from the character class, as shown below:

function Player(datalist,coordinateList,locationList,speed){base(this,Character,[datalist,coordinateList,locationList,speed]);};

To instantiate this class, three parameters are required. I will create another object to obtain these three parameters.

VaR characterlist = {Huangzhong: function () {// var datalist = new array (); datalist. push (New lbitmapdata (imglist ["player_stand"],); datalist. push (New lbitmapdata (imglist ["player_move"], 115,85); datalist. push (New lbitmapdata (imglist ["player_run"],); datalist. push (New lbitmapdata (imglist ["player_jump"], 131,212,); datalist. push (New lbitmapdata (imglist ["player_attack"], 242,143,); // var coordinatelist = new array (); coordinatelist. push (lglobal. dividecoordinate (,); coordinatelist. push (lglobal. dividecoordinate (, 85,); coordinatelist. push (lglobal. dividecoordinate (, 87,); coordinatelist. push (lglobal. dividecoordinate (786,212,); var attacklist = lglobal. dividecoordinate (484,143,); coordinatelist. push ([[attacklist [0] [0], attacklist [0] [1], attacklist [0] [1], attacklist [0] [1]); // var locationlist = new array (); locationlist. push ({X: 0, Y: 0}); locationlist. push ({X: 0, Y: 0}); locationlist. push ({X: 0, Y: 0}); locationlist. push ({X: 0, Y: 0}); locationlist. push ({X: 20, Y: 20}); return [datalist, coordinatelist, locationlist] ;}}

So if we want to get the parameters of General Huang, we can directly characterlist. Huangzhong.

At this time, the ears suddenly shouted, what Pinyin is used, how to use English, also called mr. huang or Huang sir, because the English is too bad, so I pretended not to hear it, continue to write the code ......
Next, start game initialization immediately.

// Initialization layer baselayer = new lsprite (); addchild (baselayer); // background layer backlayer = new lsprite (); backlayer. graphics. drawrect (1, "#000", [0, 0, lglobal. width, lglobal. height], true, "#000"); baselayer. addchild (backlayer); // character layer charalayer = new lsprite (); baselayer. addchild (charalayer); addhero (); // Add the baselayer event. addeventlistener (Levent. enter_frame, onframe );

No background image is prepared, so a black rectangle is drawn as the background. Let's look at the addhero function and the onframe function.

function addHero(){var heroData = CharacterList.huangzhong();hero = new Player(heroData[0],heroData[1],heroData[2]);hero.x = 200;hero.y = 200;charaLayer.addChild(hero);}function onframe(){var key = null;for(key in charaLayer.childList){charaLayer.childList[key].onframe();}}

Run the code. The result is as follows:

In other words, General Huang was sleep, and suddenly I got into the game, and the four were dark, and I immediately thought of running, but since I didn't add the action conversion code, it can only be silly to stand there, all kinds of question marks in the mind, in order not to bully people, I must hurry to write down.

In the game, there are various actions such as walking, running, jumping, and attacks. Let's use wsad on the keyboard to control the upper and lower sides, J control attacks, and K control hops. First, we need to add Keyboard Events.

// Add the keyboard event Levent. addeventlistener (lglobal. Window, lkeyboardevent. key_down, onkeydown); Levent. addeventlistener (lglobal. Window, lkeyboardevent. key_up, onkeyup );

function onkeydown(e){if(keylock)return;switch(e.keyCode){case KEY.LEFT:hero.setAction(ACTION.MOVE,DIRECTION.LEFT);break;case KEY.RIGHT:hero.setAction(ACTION.MOVE,DIRECTION.RIGHT);break;case KEY.UP:hero.setAction(ACTION.MOVE,hero.direction);break;case KEY.DOWN:hero.setAction(ACTION.MOVE,hero.direction);break;case KEY.ATTACK:keylock = true;hero.setAction(ACTION.ATTACK,hero.direction);break;case KEY.JUMP:keylock = true;hero.setAction(ACTION.JUMP,hero.direction);break;}}function onkeyup(e){if(hero.action == ACTION.MOVE || hero.action == ACTION.RUN)hero.setAction(ACTION.STAND,hero.direction);keylock = false;}

Hero is an instance of the Player Object. Since the setaction function of the Player Object is called, you must add this function to the Player Object. However, I still add the function to its parent character class.

/* ** Action change * @ Param action * @ Param direction */character. prototype. setaction = function (action, direction) {var self = This; // if the action and direction are not changed, if (self. action = Action & self. direction = direction) return; // reset the image and coordinate array self saved in the lanimation object. data = self. datalist [action]; self. anime. bitmap. bitmapdata = self. data; self. anime. bitmap. bitmapdata. setcoordinate (0, 0); self. anime. imagearray = self. coordina Telist [action]; self. action = action; self. direction = direction; // image self must be used if the direction is left. anime. setaction (0, 0, null, self. direction = direction. left); // adjust the position self. setlocation (); // If an event is added, the event is removed from self. anime. removeeventlistener (Levent. complete, self. overaction); // In addition to walking and running, other actions must be consistent and cannot be changed before an action ends. Therefore, an animation playing end event is added, to control the value of keylock if (self. action! = Action. Move & self. Action! = Action. run) {self. anime. addeventlistener (Levent. complete, self. overaction) ;}}; character. prototype. setlocation = function () {var self = This; self. anime. X = self. locationlist [self. action]. x * (self. direction = direction. left? -1: 1)-self. data. width * 0.5; self. anime. y = self. locationlist [self. action]. y-self.data.height;}; character. prototype. overaction = function (anime) {var self = anime. parent; self. anime. removeeventlistener (Levent. complete, self. overaction); self. setaction (action. stand, self. direction); keylock = false ;};

It may be that General Huang has not been on the battlefield for too long, and now he is starting to jump.

Test connection

Http://lufy.netne.net/lufylegend-js/act/index.html

Although he was excited, General Huang quickly found out that he was not right. No matter how he walked, jumped, left, or right, he could only make a hard task in the same place, so before he looked back at me, I first burst into a flash, followed by a roar of General Huang: "I X ".

This is where I am. If you want to know what General Huang has done on the battlefield, please let me analyze it again.

Download the source code

Http://fsanguo.comoj.com/download.php? Iw.act01.rar

Reprinted Please note: transferred from lufy_legend's blog

Continue to follow my blog

Http://blog.csdn.net/lufy_legend

(2): Show your skills

Http://blog.csdn.net/lufy_legend/article/details/8476382