Code parsing for js push box games and js push box games

Code parsing for js push box games and js push box games

Everyone has played the box pushing game. The reason why I wrote this article is that this game is simple enough to understand.

Demo:

Step analysis:

The code in this article has been put on github, and detailed code annotations are also carried out. You can copy the code and run it locally.

1. rendering a map

Html structure:

The html structure is very simple. You only need to get a bunch of divs to place the map class. Here I initialized 12*9 Divs, with a maximum of nine lines of height in the map.
These divs are of the same size, and the difference between map rendering is only the difference in color.

Map functions:

Var box = $ ('. box div '); // The div set used by the map function create () {// create a map function box. each (function (index) {// The number of indexes is fixed, which is the number of divs under the box div. // each time a map is created, the div box is initialized. eq (index ). removeClass () ;}); box. each (function (index, element) {// Number of the entire div in a loop. The number of two-dimensional arrays is insufficient. The default value is blank. // The level is the number of levels. The builder of the map is a two-dimensional array based on the level rendering, filter 0 boxes for map level if (builder [level] [index. eq (index ). addClass ('type' + builder [level] [index]) ;}}); box. eq (origin [level]). addClass ("pusher"); // push box person Pikachu location} // The first level of map length (the following is only a chestnut, not a code), 0 indicates that the area cannot be reached, 1 indicates the target (the place to be pushed), // 2 indicates the normal path (which can be taken), 3 indicates the wall, and 4 indicates the box [0, 0, 0, 3, 3, 0,,, 0, 3, 3, 0, 0, 0]

2. Capture Keyboard Events and determine whether to move
Use the $ (document). keydown () jqery event to capture Keyboard Events.

Capture Keyboard Events, top, bottom, right, and wsad.

$ (Document ). keydown (function (e) {var key = e. which; switch (key) {// col value is 12, up and down need 12 div for a cycle // direction key or w case 87: case 38: move (-col); // determines the moving function break; // The direction key or s case 83: case 40: move (col); break; // left or a case 65: case 37: move (-1); break; // right or d case 68: case 39: move (1); break ;} setTimeout (win, 500); // call the key to determine whether to pass the call });

Determine whether it can be moved.
There are two judgment conditions: one is to push the box, and the other is not to push the box, otherwise it will not move Pikachu.

Function move (step) {// whether to move judgment // There are two judgment conditions: Push box, and move without pushing box. Otherwise, do not move Pikachu // step up and down is a cycle of 12 Divs, and the left and right is a div positin, which is the original position of Pikachu var pikaqiu1 = box. eq (position); // The current location var pikaqiu2 = box. eq (position + step); // the next place Pikachu is going to var pushBox = box. eq (position + step * 2); // the next place where the box is going if (! Pikaqiu2.hasClass ('type4') & (pikaqiu2.hasClass ('type1') | pikaqiu2.hasClass ('type2') {// natural movement // judgment: if the class of the next div does not contain type4 (box), and the next div contains type1 (target position), or type2 (normal path) // The reason for determining whether type4 exists in this step and next step is that the normal path will change to a path with type4. At this time, the problem may occur pikaqiu1.removeClass ("pusher "); // remove the current pikaqiu2.addClass ("pusher"); // move Pikachu to the next position = position + step; // Add position value} else if (pikaqiu2.hasClass ('type4 '))&&(! PushBox. hasClass ('type4') & (pushBox. hasClass ('type1') | pushBox. hasClass ('type2') {// push box // if the next div class contains type4 (box) and does not contain overlapped type4 (box) and contains class type1 (target position) or include type2 (empty path) pikaqiu2.removeClass ('type4'); // remove the current box pikaqiu1.removeClass ("pusher"); // remove the current Pikachu pushBox. addClass ('type4'); // move the box to the next position pikaqiu2.addClass ("pusher "). addClass ("type2"); // After type4 is removed, there is no class here and it must be changed to normal path position = position + step; // Add position value }}

3. Victory judgment:
Each move calls this victory judgment.

Function win () {// victory condition judgment if ($ (". type1.type4 "). length = goal) {// compare the number of boxes that are pushed with the number of boxes set by the level. if (level <9) {alert ("666, challenge the next level-OBKoro1 "); level ++; // level + 1 goal = goalList [level]; position = origin [level]; create ();} else {alert ("awesome, great customs clearance ");}}}

Code address

Demo address