偶然間看到很多用js寫遊戲的感覺很炫酷的樣子，所以就想試試，就看了一些資料和某前端站點的視屏。於是乎就自己動手實踐了一下，上推箱子截圖
感覺很醜陋，但是功能是實現了。再說貌似大多都是這樣的吧，這一關其實還是有點難度的，我做完之後想檢測一下下一關正確麼，居然玩了20分鐘才通關。
主要考慮的是地圖是怎麼動態生成的，地圖中有灰色的，還有牆，箱子，藍色，紅色背景，人物。先看css**吧
* img #container .pos1 .pos2 .pos3 .pos0 .box .person**中的pos0/pos1/pos2/pos3/主要是牆，箱子，藍色紅色背景的樣式，其中person和box就是人物和箱子的樣式，
這裡用樣式下標來節省部分js**
其次body中html布局，這裡就很簡單了，就是乙個帶id的div，其餘的內容均動態生成，因為每個關卡的地圖資料都是不一樣的。
1 $(function我個人認為其中的精華部分就是首先地圖資料的構造用一維陣列來確定地圖座標，其中的內容的資料和樣式中pos的下標的資料對應起來感覺很讚。() );
4var game =,
18 ,
19 ,
20
21],
22 person: //
人物 座標點物件
23},24,
41 ,
42 ,
43 ,
44 ,
45 ,
46 ,
47 ,
48
4950
],51 person: 52}
53],
54 init: function
(oparent) ,
59 createmap: function
(inow) , this
));69
this
70this
.createbox();
71this
.createperson();
72},
73 createbox: function () );
77this
78 }, this
));79
},80 createperson: function () );
84 operson.data('x', pos.x);//
快取在operson上的資料
85 operson.data('y', pos.y);
86this
87this
.bindperson(operson);
88},
89 bindperson: function (operson) );
95break;96
case 38: //
↑97 operson.css("backgroundposition", "0 0");
98this.moveperson(operson, );
99break
;100
case 39: //
→101 operson.css("backgroundposition", "-50px 0");
102this.moveperson(operson, );
103break
;104
case 40: //
↓105 operson.css("backgroundposition", "100px 0");
106this.moveperson(operson, );
107break
;108
default
:109
}110 }, this
));111
},112 moveperson: function (op, opt) );
121 $(".box").each($.proxy(function
(i, elem) );
125 $(".box").each($.proxy(function
(j, elem2) );
129 op.data('x', op.data('x') -xvalue);
130 op.data('y', op.data('y') -yvalue);
131 op.css();
132}
133 }, this
));134
}135
else
if (this.pz(op, $(elem))) );
139}
140 }, this
));141
}142
this
.nextshow();
143},
144 nextshow: function ()
152 }, this
));153 }, this
));154
if (inum == this
.newjson.box.length)
158},
159 pz: function (obj1, obj2)
171else
172
173}
174 };
其次是邏輯判斷，比如當人物推箱子是發現前面是牆，推箱子遇到箱子時前面也是箱子，此時如果又遇到了牆怎麼處理。最後判斷輸贏就是如果紅色區域的位置全部被箱子所佔據那麼也就
這種類似的小遊戲重在思路，如果複雜的話就要考慮架構效能等問題了，我猜的。因為沒有做大的遊戲,如有錯誤請指出。如果你覺得不錯就支援推薦一下。
download pushbox
推箱子遊戲
大一寒假 1.寫 時我犯了乙個很大的錯誤 不然早就搞定了 把 與 混淆了 大忌啊 2.這裡實現了數位化編碼 3.上72 下80 左75 右77 4.特殊圖形可以到qq拼音符號裡獲取 include include include define x 1 人的位置 define y 5 define n...
推箱子遊戲
本專案開發環境為vs2017 c 對推箱子遊戲的觀察可以發現，該遊戲就是在乙個頁面對進行移動的操作。因此可以定義乙個二維陣列map，進行初始化。0 空地 1 牆壁 3 箱子的目的地 4 箱子 6 人 7 箱子與目的地重合 9 人在箱子目的地。如下 include include include in...
推箱子遊戲（簡易）
標頭檔案 boxman.h define key up w define key down s define key left a define key right d define key quite q define map x 9 define map y 12 define ratio 61...