preface

Push box small game we must have played, the reason for writing this article, is that this small game is simple enough to understand, you read the article, you can spend half a day to knock out a small game push box, if you like it can point bozan, or pay attention to it, I hope this article can help you.

This post was originally posted on my blog:obkoro1.com

The demo:Push the box small game

Step analysis:

This article code has been put on github above, there are also very detailed code comments, you can copy down, run in the local have a look.

1. Render the map

  1. HTML structure:

    The HTML structure is pretty simple. Just make a bunch of divs to put the map's class in, and I've initialized 12 by 9 divs, with a maximum of nine line heights in the map. These divs are all the same size, and the only difference is the color.Copy the code

  2. Map function:

    var box=$('.box div'); Function create(){// create the map function box.each(function(index){// the number of index is fixed, // Initialize div box.eq(index).removeclass () every time you create a map; }); Box.each (function(index,element){// Loop around the number of elements in the entire div. If (builder[level][index]){// Filter 0 box-.eq (index).addClass('type'+ Builder [level][index]); }}); box.eq(origin[level]).addClass("pusher"); // The map for level 1 looks like this (below is just a nut, not a code), 0 for unreachable areas, 1 for targets (to be pushed to), 2 for normal paths (to be walked), 3 for walls, Four representative box [,0,0,0,3,2,3,3,3,3,0,0,0,0,0,3,3,3,0,0,0,0,0 0, 0,0,0,0,3,1,3,0,0,0,0,0, 0, 0,0,3,3,3,4,2,4,1,3,0,0, ,0,0,0,0,3,1,3,0,0,0,0,0,3,1,2,4,2,3,3,3,0,0 0, 0,0,3,3,3,3,4,3,0,0,0,0, 0, 0,0,0,0,0,3,3,3,0,0,0,0]Copy the code

2. Capture keyboard events and determine whether they can be moved

Use the $(document).keyDown ()jqery event to capture the keyboard event.

  1. Capture keyboard events, up, down, left, and WSAD.

    $(document).keydown(function (e) { var key=e.which; Case 87: case 38: move(-col); case 87: case 38: move(-col); // determine the move function break; Case 83: case 40: move(col); break; A case 65: case 37: move(-1); break; Case 68: case 39: move(1); break; } setTimeout(win,500); });Copy the code

  2. Determine if it can be moved.

Divided into two judgment conditions: one is to push the box, one is not to push the box to move naturally, otherwise do not move pikachu.

Function move(step){// Can be divided into two judgment conditions: one is to push the box, the other is not to push the box naturally move. Var pikaqiu1=box. Eq (position); Var pikaqiu2=box. Eq (position+step); Var pushBox= box-eq (position+step*2); // The box goes to the next place if(! Pikaqiu2. HasClass (' type4) && (pikaqiu2. HasClass (' type1 ') | | pikaqiu2. HasClass (' type2))) {/ / mobile/natural/judgment: If the class of the next div does not contain Type4 (box) and the next div contains Type1 (destination location), or Type2 (normal path) // The reason for this step and the next step to determine whether there is type4 is that the normal path will become a path with Type4, This is where the problem arises. // Remove the current pikachu pikaqiu2.addClass("pusher"); // Move pikachu to the next position position=position+step; Else if((pikaqiu2.hasClass('type4'))&&(! PushBox. HasClass (' type4) && (pushBox. HasClass (' type1 ') | | pushBox. HasClass (' type2))) {/ / box // If the class of the next div contains Type4 (box) and does not contain overlapping Type4 (box) and either contains Class Type1 (target location) or contains Type2 (empty path) pikaqiu2.removeclass ('type4'); // Remove the current bin pikaqiU1. removeClass("pusher"); // Remove the current pikachu pushbox.addClass ('type4'); // Move the box to the next location pikaqiu2.addClass("pusher").addClass("type2"); // // is a normal path position=position+step; // Add position}}Copy the code

3. Victory judgment:

This victory judgment is called every time a move is made.

Function win(){if($(".type1.type4").length===goal){if(level<9) {alert("666, Challenge the next level --OBKoro1"); level++; // Level +1 goal = goalList[level]; position = origin[level]; create(); }else {alert(" Cool!! "); }}}Copy the code

The code address,The demo address

conclusion

This article is over here, if you like, quickly go to knock out a, I hope this article can help you divergent thinking.

Finally: if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions. Then is the hope of watching the friends point a like, can also pay attention to me. Personal blog and Nuggets personal homepage

The above 2018.1.7