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

demo:

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