Sokoban game we will have played, wrote this article, is that the game is simple enough to understand the


these div are the same size, and the map rendering distinguishes only the different colors.

 var box=$map function: 

('.box div'); / / map using the div set function create () {/ / function createmap (function box.each (index) {//index number is fixed, the number is below div / / box div div box.eq to create each map initialization (index) (.RemoveClass);}); box.each (function (index, element) the number of cycles of the two-dimensional array {/ / div in the insufficient number of default to //level as blank level number according to the level of builder for rendering map two-dimensional array, for map level if (builder[level][index]) {/ / filter 0 box.eq (index).AddClass ('type'+builder[level][index]);}}); box.eq (origin[level]).AddClass ("pusher"); / / sohoban} / / the first people Pikachu position map (just below this long chestnut, not 0, not on behalf of code) Arrived in the area, 1 representative of the target (to be pushed to the place), //2 represents the common path (go), 3 representative wall, representing 4 box [0,0,0,0,3,3,3,0,0,0,0,0, 0,0,0,0,3,1,3,0,0,0,0,0, 0,0,0,0,3,2,3,3,3,3,0,0, 0,0,3,3,3,4,2,4,1,3,0,0, 0,0,3,1,2,4,2,3,3,3,0,0, 0,0,3,3,3,3,4,3,0,0,0,0, 0,0,0,0,0,3,1,3,0,0,0,0, 0,0,0,0,0,3,3,3,0,0,0,0]

2. capture keyboard events to determine whether we can use mobile
$(document).Keydown (jqery) event capture keyboard events.

captures keyboard events, up and down, and WSAD.

 (document).Keydown (function (E) {var key=e.which; switch (key) {//col = 12 to 12, moving up and down for a period of div / / key or w Case 87: case 38: move (-col); / / break / / mobile judgment function; under the direction key or s case 83: case 40: move (Col); break; / / a case 65: key left or case 37: move (-1); break; / / D case 68: right arrow keys or case 39: move (1); break;} setTimeout (win, 500); / / key after adjustment to determine whether the clearance}); whether 

can judge the mobile.
is divided into two criteria: one is a suitcase, the other is not to push the box to move naturally, or not to move Picacho.

 function move (step) {/ / / / if the mobile judgment is divided into two conditions of a box, a box is not a natural move. It does not move on Picacho //step is 12 div a cycle is about 1 div positin is Picacho's original position var pikaqiu1=box.eq (position); / / now where var pikaqiu2=box.eq Picacho (position+step); / / Picacho to go to the next place var pushBox=box.eq (position+step*2); / / the box to go under a local if (! Pikaqiu2.hasClass ('type4') & & (pikaqiu2.hasClass ('type1') ||pikaqiu2.hasClass ('type2'))) {/ / / / natural mobile judge: if a div class does not contain type4 (box), and a div containing type1 (target position), or type2 (common path) / / reasons for this step and the next step is to determine whether there is type4 common path will become the path of type4, this time there will be a problem of pikaqiu1.removeClass ("pusher"); / / remove The Picacho pikaqiu2.addClass ("pusher"); / / Picacho to move to the next position position=position+step; / / position value increased if (else} (pikaqiu2.hasClass ('type4') (&); &! PushBox.hasClass ('type4') & (pushBox.hasClass); & ('type1') || pushBox.hasClass ('type2')) {/ / Tuixiangzi) / / if the next div class contains type4 (box) and does not contain overlapping type4 (box) and contains class type1 (target position) or type2 (air) containing pikaqiu2.removeClass ('type4'); / / remove the current box pikaqiu1.removeClass ("pusher"); / / remove the current Picacho pushBox.addClass ('type4'); / / mobile box to the next position pikaqiu2.addClass ("pusher").AddClass ("type2"); / / type4 / / was removed, there is no class, to become ordinary Path position=position+step; / / position value increased 

3.}} victory judgment:
each movement to call this victory judgment.

 function (win) {/ / victory condition if ($(".Type1.type4").Length===goal) {/ / push box with a level set by the number of boxes (level< 9) compared to if {alert ("666, the next challenge. --OBKoro1"); level++; / / +1 level goal = goalList[level]; position = origin[level]; create (}else); alert ("bad brother {customs");}}} 

"external rel=

code address nofollow" target= "_blank >demo


This concludes the body part