如下是效果圖：

　　這個拖箱子游戲做了移動端的適配， 我使用了zepto的touch模塊， 通過手指滑動屏幕就可以控制烏龜走不同的方向；

　　因為推箱子這個游戲比較簡單， 直接用了過程式的方式寫代碼， 模塊也就是兩個View 和 Model， 剩下就是用戶的事件Controller， 用戶每一次按下鍵盤的方向鍵都會改變數據模型的數據，然后重新生成游戲的靜態html， 然后用innerHTML方式插入到界面， 自動生成DOM節點；

　　游戲的關卡模型就是數據， 我把每一關的數據分為三塊：

　　地圖數據，二維數組（地圖數據包括板磚， 箱子要去的目標位置， 空白的位置）
　　箱子數據，一維數組（箱子的初始位置）
　　小烏龜的數據，json對象
　　每一個關卡都有對應的游戲關卡數據， 模擬的數據如下：

　　有一個很重要的東西就是推箱子游戲的主要邏輯：因為小烏龜走的地方只能是空白的區域，而且烏龜前面有墻就不能走， 或者烏龜前面是箱子，就再判斷箱子前面是否有墻， 如果沒有墻烏龜和箱子都可以走往前走一步，如果有墻就不能走。每一次小烏龜走了都改變地圖數據，然后重新生成界面，如此循環， 每一小烏龜走完都要檢測地圖數據中的箱子數據是否全對上了，對上了就給用戶提示， 并進入下一關；

　　游戲的模板引擎用了handlebarsJS， 可以去官網看API 。 這個是寫過的一篇博客，Handlebars的使用方法文檔整理(Handlebars.js)：打開， 模板內容：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript編寫推箱子游戲_javascript技巧

JavaScript編寫推箱子游戲_javascript技巧:推箱子游戲是老游戲了， 網上有各種各樣的版本， 說下推箱子游戲的簡單實現，以及我找到的一些參考視頻和實例； 如下是效果圖： 這個拖箱子游戲做了移動端的適配， 我使用了zepto的touch模塊， 通過手指滑動屏幕就可以控制烏龜走不同的方向； 因為推箱

推薦度：

點擊下載本文 文檔為doc格式