HTML5 game development-Zero-basic development RPG games-open-source lecture (2)-start a hero

In the previous article, I have explained in detail how to add a map and a game character. Now let's add control events and let the little hero move around.

For more information about the previous article, see here

HTML5 game development-Zero-basic development RPG games-Open Source lecture (1)

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

We have created a character class for game characters,

Now, add the following content to the class:

Character. prototype. changedir = function (DIR) {};/*** sets the coordinates of the person * @ Param x and y */character. prototype. setcoordinate = function (sx, Sy) {};/***** obtain the character coordinates **/character. prototype. getcoordinate = function (){};

Changedir is used to control the direction and movement of characters from the external
To control the game's characters, first, we need to control the event. When this event is triggered, we will call the corresponding method, setcoordinate and getcoordinate are used to set and obtain the current coordinates of the person.

First, in order to adapt to the smart phone, we do not need to use keyboard events for the moment, but click events. So we will first add two control buttons and add the following code at the bottom of the gameinit method of main. js.

// Add control button bitmapdata = new lbitmapdata (imglist ["E1"]); bitmap = new lbitmap (bitmapdata); bitmap. X = 0; bitmap. y = 0; ctrllayer. addchild (Bitmap); bitmapdata = new lbitmapdata (imglist ["E2"]); bitmap = new lbitmap (bitmapdata); bitmap. X = 280; bitmap. y = 30; ctrllayer. addchild (Bitmap); ctrllayer. X = 40; ctrllayer. y = 180;

Run the code and get the preview as follows:

Before adding a control event, we can add several variables for ease of control.

// The direction variable VAR down = 0; var left = 1; var right = 2; var up = 3; var step = 32; // click the status var iskeydown = false;

Step represents the moving step. Because the map consists of 32*32 small images, we set the step to 32.

The direction variables 0, 1, 2, and 3 correspond to the direction of line 1, 2, and 3 in the image below.

The reason for adding the click status is that when we press the move button, the person should always be in the moving status, so we use this variable to distinguish whether we press or lift it up, now you are ready to add a mobile event.

// Add a click Control event backlayer. addeventlistener (lmouseevent. mouse_down, ondown); backlayer. addeventlistener (lmouseevent. mouse_up, onup); function ondown (event) {// Based on the click position, determine the moving direction if (event. offsetx> = ctrllayer. X + 40 & event. offsetx <= ctrllayer. X + 80) {If (event. offsety> = ctrllayer. Y & event. offsety <= ctrllayer. Y + 40) {player. changedir (up);} else if (event. offsety> = ctrllayer. Y + 80 & event. offsety <= ctrllayer. Y + 120) {player. changedir (down) ;}} else if (event. offsetx> = ctrllayer. X & event. offsetx <= ctrllayer. X + 40) {If (event. offsety> = ctrllayer. Y + 40 & event. offsety <= ctrllayer. Y + 80) {player. changedir (left) ;}} else if (event. offsetx> = ctrllayer. X + 80 & event. offsetx <= ctrllayer. X + 120) {If (event. offsety> = ctrllayer. Y + 40 & event. offsety <= ctrllayer. Y + 80) {player. changedir (right) ;}} iskeydown = true;} function onup (event) {iskeydown = false ;}

Here, we need to know that in the smartphone, the click event is actually the touch_start, touch_move, and touch_end events.
When using the legendforhtml5programming library, you only need to add the mouse_down, mouse_move, and mouse_up events. Then, the library automatically determines whether to load the touch event or the mouse event.
In the ondown method, the iskeydown state is changed to true, indicating that we are in the pressed state.
Then, call the changedir method of the character class based on the position where we click, and pass in the direction of the click.

With the control event, the key now lies in the changedir method. You only need to move the data based on the passed value.
Let's imagine that if we move a step every time, the character will jump from a small square to a square, and what we need is to slowly move it to the next square, there is a moving process
In order to achieve this process, we do not change the coordinates of the characters immediately, but change the state of the characters, from static to moving, and then move, let the characters move to the target point in a small step
Modify the constructor of the character class as follows:

Function character (data, row, Col, speed) {base (this, lsprite, []); var self = This; // you can specify the speed of a character. speed = NULL? 3: speed; self. speedindex = 0; // set the character size data. setproperties (0, 0, Data. image. width/COL, Data. image. height/row); // get the character image split array var list = lglobal. dividecoordinate (data. image. width, Data. image. height, row, col); // sets the animation self. anime = new lanimation (this, Data, list); // adjust the character position self. anime. y-= 16; // set not to move self. move = false; // set the number of moves in a step to self. moveindex = 0 ;};

The reason for adjusting the position of a person is that after the person's image is split, the size of each action is 32*48, and the size of each cell on the map is 32*32,
Set the character status to not move, and then modify the changedir method.

/*** Change the character direction **/character. Prototype. changedir = function (DIR) {var self = This; // if it is being moved, if (! Self. move) {// set the character direction self. direction = dir; // sets the image animation self. anime. setaction (DIR); // start to move self. move = true; self. moveindex = 0 ;}};

Here we will briefly describe the setaction method of the lanimation class. The setaction (rowindex, colindex) method has two parameters. The Image array passed in the lanimation is a two-dimensional array, these two parameters can change the action of the currently displayed image. Of course, you can also pass only one of them.
This time, I split the 4*4 motion pictures into 4*4 two-dimensional arrays and passed them to the lanimation class. Therefore, each row of images now represents one direction.
After the character state is set to move, it should start to move step by step in the loop event.

/***** Cyclic event **/character. prototype. onframe = function () {var self = This; // If (self. speedindex ++ <self. speed) return; self. speedindex = 0; // when a character is moved, move if (self. move) self. onmove (); // the animation of the character to play self. anime. onframe () ;};/*** start to move **/character. prototype. onmove = function () {var self = This; // sets the number of moves in a moving step. var ml_cnt = 4; // calculates the length of a move. var ML = Step/ml_cnt; // start to move the switch (self. direction) {Case up: Self. Y -= ML; break; case left: Self. x-= ML; break; case right: Self. X + = ML; break; case down: Self. Y + = ML; break;} self. moveindex ++; // when the number of moves is equal to the set number of times, start to determine whether to continue moving if (self. moveindex> = ml_cnt) {self. moveindex = 0; // if the move key has been released, stop moving. Otherwise, move if (! Iskeydown) {self. Move = false; return ;}}};

Here, I chose to let the characters move every step four times, so as to achieve the effect of slow movement, run the program, click the arrow key in the screen, and I can see it, the characters can be moved slowly.

However, this still doesn't work. We found that the character can be moved, but now he is a Superman, and the sky is everywhere.
In this case, we need to add a moving judgment during the moving process to see if it can be moved,
To realize this judgment, we must know where the map can be moved and where it cannot be moved.
Therefore, we need a map terrain as follows:

// Map terrain array var mapdata = [, 1], [, 0, 0, 0, 0, 0, 0,, 1], [, 1, 1], [, 1], [, 0, 1], [, 1], [, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1];

In the terrain array, 0 indicates that the terrain can be moved. 1 indicates that the obstacle is not moved,
Next, add a Judgment Method to the character class.

/*** Obstacle judgment ** @ Param judgment direction **/character. prototype. checkroad = function (DIR) {var self = This; var tox, toy, mycoordinate; // when the judgment direction is null, the default direction is if (DIR = NULL) dir = self. direction; // obtain the coordinate of a person. mycoordinate = self. getcoordinate (); // start to calculate the coordinates of the moving destination switch (DIR) {Case up: tox = mycoordinate. x; toy = mycoordinate. y-1; break; case left: tox = mycoordinate. x-1; toy = mycoordinate. y; break; case right: tox = mycoordinate. X + 1; toy = mycoordinate. y; break; case down: tox = mycoordinate. x; toy = mycoordinate. Y + 1; break;} // If the moving range exceeds the MAP range, if (Tox <= 0 | toy <= 0) cannot be moved and return false; if (toy> = mapdata. length | tox> = mapdata [0]. length) return false; // If the destination is an obstacle, it cannot be moved if (mapdata [Toy] [TOX] = 1) return false; return true ;};

Then, in the changedir method and onmove method, add the corresponding judgment as follows:

/*** Start to move **/character. prototype. onmove = function () {var self = This; // sets the number of moves in a moving step. var ml_cnt = 4; // calculates the length of a move. var ML = Step/ml_cnt; // start to move the switch (self. direction) {Case up: Self. y-= ML; break; case left: Self. x-= ML; break; case right: Self. X + = ML; break; case down: Self. Y + = ML; break;} self. moveindex ++; // when the number of moves is equal to the set number of times, start to determine whether to continue moving if (self. moveindex> = ml_cnt) {self. moveindex = 0; // if the move key has been released or the front is an obstacle, stop Move; otherwise, move if (! Iskeydown |! Self. checkroad () {self. move = false; return ;}};/*** change the direction of the character and determine whether it is movable **/character. prototype. changedir = function (DIR) {var self = This; // if it is being moved, if (! Self. Move) {// set the character direction self. Direction = dir; // set the Picture Animation self. Anime. setaction (DIR); // determine whether the animation can be moved if (! Self. checkroad (DIR) return; // if it can be moved, start moving self. Move = true; self. moveindex = 0 ;}};

Okay, you're done. Start running.

The test URL is as follows:

Http://lufylegend.com/demo/rpg/index.html

The lufylegend. js engine package contains this demo. Please download the lufylegend. js engine directly to view the source code in the engine package

Lufylegend. js Engine

Http://lufylegend.com/lufylegend

Map scrolling and character dialog. continue next time. Please support more.