[HTML5 Game Development] Classic push box

Statement:

Lufylegend. the JS engine has been updated to more than 1.6. Although I have released some tutorials and provided some simple game examples, I have never made several complete works, it's too short for me to be alone. I will try to use lufylegend in the next time. the JS engine has developed several complete works to increase the persuasiveness of this engine. I hope I like HTML5 and those who like game development will give more comments.

This time, I will first look at a classic push box game. I believe everyone knows this game. The push box game first originated from Japan and is a game that is extremely capable of exercising logical thinking, the box can only be pushed and cannot be pulled. players must put all the boxes back in a limited space, as shown in.

Figure 1

This was developed using the lufylegend. js engine of the latest version. If you want to challenge me, you can click the following game link to try it out.

Http://lufylegend.com/demo/box

The game has a total of six levels. I added the ranking system to the game. Each level can be used to upload my own scores and compete with everyone, alternatively, you can reply your experience in passing the exam to the following article.

Production start

Now let's take a look at how to make the game.

First, you need to download the lufylegend. js Engine

Below is my post on Blog lufylegend-1.6.0

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

Next we will step into the development topic.

2. Draw background and box

Let's prepare a picture first,

Figure 2

If we divide the above graph into five parts in average, their sequence numbers are 0, 1, 2, 3, and 4, respectively.

We can use the five pictures above to splice any room and place the boxes in the room.

For example, in Figure 1 at the beginning of my blog, it is the first place in the game. To draw this room, first know where the pictures should be placed. We have prepared an array in advance.

var stage01 = [[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1, 1, 1, 1, 1, 1, 1,-1,-1,-1],[-1,-1, 1, 0, 0, 0, 0, 1, 1,-1,-1],[-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],[-1,-1, 1, 4, 4, 0, 4, 4, 1,-1,-1],[-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],[-1,-1, 1, 1, 0, 0, 0, 0, 1,-1,-1],[-1,-1,-1, 1, 1, 1, 1, 1, 1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]];

-1 indicates that no placement is made. Then, numbers 0, 1, and 4 correspond to the sequence numbers in Figure 2 respectively.

It is easy to draw the room according to this array. Let's look at the function below.

function drawFloor(x,y){if(list[y][x] < 0)return;var bitmap = new LBitmap(bitmapDataList[list[y][x]]);bitmap.x = x*STEP;bitmap.y = y*STEP;boxLayer.addChild(bitmap);}

The list array is the above stage01 array. The parameters X and Y are the serial numbers of the columns and rows in the array, and the step is the length of each small image. Draw a small graph block, in fact, I just created an lbitmap object.

Objects such as lsprite and lbitmap are lufylegend. common objects in JS engines. For details about their usage, refer to the official API documentation or some of my previous articles.

Of course, there must be a box in the room at the beginning, and the box must be pre-configured at the beginning. We also create an array.

var box01 = [{x:3,y:3},{x:4,y:3},{x:5,y:3},{x:5,y:5},{x:6,y:5},{x:7,y:5}];

The function to draw a box is as follows:

function drawBox(){var bitmap;for(var i=0;i<boxList[stageIndex].length;i++){bitmap = new LBitmap(bitmapDataList[2]);bitmap.x = boxList[stageIndex][i].x*STEP;bitmap.y = boxList[stageIndex][i].y*STEP;boxLayer.addChild(bitmap);nowBoxList.push(bitmap);}}

Above, I also use the lbitmap object to display these boxes. The nowboxlist array is used to store these box objects that have been loaded to the game interface, and then used to determine whether the game passes through.

Because 4 in the stage01 array indicates the location where the box needs to be restored, when determining whether the game is successful, you only need to determine whether these locations overlap with the positions of all the boxes. The method is as follows.

function checkBox(){var bitmap,x,y,win=true;list = [];for(var i=0;i<stageList[stageIndex].length;i++){list.push(stageList[stageIndex][i].join(",").split(","));}for(var i=0;i<nowBoxList.length;i++){bitmap = nowBoxList[i];x = bitmap.x / STEP;y = bitmap.y / STEP;if(list[y][x] == 4){bitmap.bitmapData = bitmapDataList[3];}else{bitmap.bitmapData = bitmapDataList[2];win = false;}list[y][x] += 10;}if(win)gameClearShow();}

The code is intercepted directly from the program, so some new arrays and objects appear.

Stagelist stores all the level information. stageindex is the serial number of the current level. stagelist [stageindex] can obtain the information of the current level. The bitmapdatalist array stores the lbitmapdata object of the small image in Figure 1, for the moment, the key is as follows.

if(list[y][x] == 4){bitmap.bitmapData = bitmapDataList[3];}else{bitmap.bitmapData = bitmapDataList[2];win = false;}

The function loops through the positions of all boxes. If their position number is 4, it indicates that the box has been reset. If all returns indicate that the box has passed, otherwise the game continues, and false is returned.

3. The hero debuted and promoted the box.

Prepare an image as follows:

Figure 3

For the animation of moving characters, you need lanimation, another important object in the lufylegend engine. It is used to play images in sequence to form an animation. For details, refer to the official API documentation.

The following is the hero's constructor.

/*** Cyclic event ** @ Param data image data * @ Param row number of image lines ** @ Param Col Number of image lines **/function character (data, row, col) {base (this, lsprite, []); var self = This; // you can specify the animation speed of a character. speed = 2; 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); // set not to move self. move = false; // set the number of moves in a step to self. moveindex = 0 ;};

How to push the box, see the onmove function below

/*** 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; If (box) box. y-= ML; break; case left: Self. x-= ML; If (box) box. x-= ML; break; case right: Self. X + = ML; If (box) box. X + = ML; break; case down: Self. Y + = ML; If (box) box. 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; box = NULL; self. move = false; checkbox ();}};

We can see whether the box is followed by the hero. The key is to check the box variable. The value of this variable is set in the following checkroad function.

Character. prototype. checkroad = function (DIR) {var self = This; var tox, toy; // start to calculate the coordinates of the moving destination switch (DIR) {Case up: tox = 0; toy =-1; break; case left: tox =-1; toy = 0; break; case right: tox = 1; toy = 0; break; case down: tox = 0; toy = 1; break;} If (list [self. y/step + toy] [self. x/step + tox] = 1) return false; If (list [self. y/step + toy] [self. x/step + tox]> 4) {If (list [self. y/step + toy * 2] [self. x/step + tox * 2] = 1 | list [self. y/step + toy * 2] [self. x/step + tox * 2]> 4) return false; box = getbox (self. X + tox * step, self. Y + toy * step);} return true ;};

In fact, it is to judge whether there is an obstacle in front of the hero's direction. If the obstacle is a wall, it cannot be moved. If it is a box, check whether there is an obstacle behind the box, if yes, the box cannot be moved. Otherwise, the box must be moved with the hero. Set the box to the box in front of the hero.
The above function is called when the character is about to move, as shown below.

/*** Change the character direction and determine whether it is movable **/character. prototype. changedir = function (DIR) {var self = this; if (self. move) return; self. direction = dir; self. anime. setaction (DIR); If (! Self. checkroad (DIR) return; self. Move = true; steps. Text = parseint (steps. Text) + 1 ;};

When the direction icon in Figure 1 is pressed, move the character based on the click direction.

The method for clicking the Pattern mark is, of course, a mouse event.

ctrlLayer.addEventListener(LMouseEvent.MOUSE_UP,onCtrl);

In the onctrl function, move the cursor Based on the clicked position.

function onCtrl(event){var ctrlSize = 60;if(event.selfX >= ctrlSize && event.selfX <= ctrlSize*2){if(event.selfY >= 0 && event.selfY <= ctrlSize){player.changeDir(UP);}else if(event.selfY >= ctrlSize*2 && event.selfY <= ctrlSize*3){player.changeDir(DOWN);}}else if(event.selfY >= ctrlSize && event.selfY <= ctrlSize*2){if(event.selfX >= 0 && event.selfX <= ctrlSize){player.changeDir(LEFT);}else if(event.selfX >= ctrlSize*2 && event.selfX <= ctrlSize*3){player.changeDir(RIGHT);}}}

In this way, the main functions of the game are described.

4. Create a Starting Screen

As follows.

Figure 4

Using the lufylegend. js engine to create an interface is no difficulty. The Code is as follows.

Function gamelogo () {base (this, lsprite, []); var self = This; var logolist =, 2, 1], [1, 1, 1]; var bitmap, logolayer; logolayer = new lsprite (); logolayer. graphics. drawrect (6, "# ff7f50", [0, 0, lglobal. width, lglobal. height], true, "# ffdab9"); self. addchild (logolayer); logolayer = new lsprite (); logolayer. X = 50; logolayer. y = 50; For (VAR I = 0; I <logolist. length; I ++) {for (VAR J = 0; j <logolist. lengt H; j ++) {bitmap = new lbitmap (bitmapdatalist [logolist [I] [J]); bitmap. X = J * step; bitmap. y = I * step; logolayer. addchild (Bitmap) ;}} bitmap = new lbitmap (New lbitmapdata (imglist ["Player"], 0, 0, step, step); bitmap. X = step; bitmap. y = 2 * step; logolayer. addchild (Bitmap); self. addchild (logolayer); labeltext = new ltextfield (); labeltext. rotate =-20; labeltext. color = "#4b0082"; labeltext. font = "Hg row entity"; labeltext. siz E = 100; labeltext. X = 300; labeltext. y = 50; labeltext. stroke = true; labeltext. linewidth = 4; labeltext. TEXT = "push"; self. addchild (labeltext); labeltext = new ltextfield (); labeltext. color = "#4b0082"; labeltext. font = "Hg row entity"; labeltext. size = 100; labeltext. X = 450; labeltext. y = 60; labeltext. stroke = true; labeltext. linewidth = 4; labeltext. TEXT = "box"; self. addchild (labeltext); labeltext = new ltextfield (); La Beltext. rotate = 20; labeltext. color = "#4b0082"; labeltext. font = "Hg row entity"; labeltext. size = 100; labeltext. X = 600; labeltext. y = 60; labeltext. stroke = true; labeltext. linewidth = 4; labeltext. TEXT = "sub"; self. addchild (labeltext); labeltext = new ltextfield (); labeltext. color = "# b22222"; labeltext. font = "Hg row entity"; labeltext. size = 40; labeltext. X = 100; labeltext. y = 250; labeltext. stroke = true; labeltext. linew Idth = 4; labeltext. Text = "click to start game !! "; Self. addchild (labeltext); var social = new social (); Social. X = 220; Social. y= 330; self. addchild (social); labeltext = new ltextfield (); labeltext. font = "Hg row entity"; labeltext. size = 14; labeltext. X = 400; labeltext. y = 390; labeltext. TEXT = "-HTML5 game engine lufylegend. JS "; self. addchild (labeltext); labeltext = new ltextfield (); labeltext. color = "#006400"; labeltext. font = "Hg row entity"; labeltext. size = 14; labeltext. X = 400; labeltext. y = 410; labeltext. TEXT = "http://www.lufylegend.com/lufylegend"; self. addchild (labeltext); self. addeventlistener (lmouseevent. mouse_up, menushow );};

It is to display several images and add some text. For how to use the ltextfield object, see the official API documentation.

5. Create a selection screen

As follows.

Figure 5

The Code is as follows.

Function gamemenu () {base (this, lsprite, []); var self = This; var menulayer; menulayer = new lsprite (); menulayer. graphics. drawrect (6, "# add8e6", [0, 0, lglobal. width, lglobal. height], true, "# e6e6fa"); self. addchild (menulayer); labeltext = new ltextfield (); labeltext. color = "# b22222"; labeltext. font = "Hg row entity"; labeltext. size = 40; labeltext. X = 200; labeltext. y = 30; labeltext. stroke = true; labeltext. linewidth = 4; la Beltext. Text = "Please Select !! "; Menulayer. addchild (labeltext); For (VAR I = 0; I <stagemenu. length; I ++) {self. stagevsmenu (stagemenu [I]) ;}}; gamemenu. prototype. stagevsmenu = function (OBJ) {var self = This; var menubutton, btn_up; If (obj. open) {btn_up = new lsprite (); btn_up.graphics.drawrect (2, "#000", [191970,], true, "#"); labeltext = new ltextfield (); labeltext. color = "# ffffff"; labeltext. font = "Hg row entity"; labeltext. size = 20; labeltext. X = 40; labeltext. y = 5; btn_up.addchild (labeltext) labeltext. TEXT = "nth" + (obj. index + 1) + "off"; labeltext = new ltextfield (); labeltext. color = "# ffffff"; labeltext. font = "Hg row entity"; labeltext. size = 12; labeltext. X = 10; labeltext. y = 40; btn_up.addchild (labeltext) labeltext. TEXT = "step:" + obj. step; labeltext = new ltextfield (); labeltext. color = "# ffffff"; labeltext. font = "Hg row entity"; labeltext. size = 12; labeltext. X = 10; Labeltext. y = 60; btn_up.addchild (labeltext) labeltext. TEXT = "Times:" + obj. times; var btn_down = new lsprite (); btn_down.graphics.drawrect (2, "#000", [,], true, "# 2f4f4f"); labeltext = new ltextfield (); labeltext. color = "# ffffff"; labeltext. font = "Hg row entity"; labeltext. size = 20; labeltext. X = 40; labeltext. y = 5; labeltext. TEXT = "nth" + (obj. index + 1) + "off"; btn_down.addchild (labeltext); labeltext = new ltextfie LD (); labeltext. color = "# ffffff"; labeltext. font = "Hg row entity"; labeltext. size = 12; labeltext. X = 10; labeltext. y = 40; btn_down.addchild (labeltext) labeltext. TEXT = "step:" + obj. step; labeltext = new ltextfield (); labeltext. color = "# ffffff"; labeltext. font = "Hg row entity"; labeltext. size = 12; labeltext. X = 10; labeltext. y = 60; btn_down.addchild (labeltext) labeltext. TEXT = "Times:" + obj. times; menubutton = new lbutton (B Tn_up, btn_down); menubutton. OBJ = OBJ; menubutton. addeventlistener (lmouseevent. mouse_up, function (event, self) {gamestart (self. OBJ. index) ;}) ;}else {btn_up = new lsprite (); btn_up.graphics.drawrect (2, "#000", [708090,], true "); labeltext = new ltextfield (); labeltext. color = "# ffffff"; labeltext. font = "Hg row entity"; labeltext. size = 20; labeltext. X = 40; labeltext. y = 5; btn_up.addchild (labeltext) labeltext. t EXT = "??? "; Menubutton = btn_up;}; self. addchild (menubutton); menubutton. x = obj. x * 220 + 100; menubutton. Y = obj. y * 140 + 130 ;}

All right, the main game code has been posted.

Source code

The above code is fragmented, and I just spoke about it in the center part. The complete game source code is provided below. If you want to study it, you can click the link below to download it.

Http://lufy.netne.net/lufylegend_download/box.rar

Note: This attachment only contains the source code of this Article. For the lufylegend. js engine, go to http://lufylegend.com/lufylegendto download it.

Reprinted Please note: transferred from lufy_legend's blog

Continue to follow my blog

Http://blog.csdn.net/lufy_legend