如下是效果圖：

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

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

　　游戲的關(guān)卡模型就是數(shù)據(jù)， 我把每一關(guān)的數(shù)據(jù)分為三塊：

　　地圖數(shù)據(jù)，二維數(shù)組（地圖數(shù)據(jù)包括板磚， 箱子要去的目標(biāo)位置， 空白的位置）
　　箱子數(shù)據(jù)，一維數(shù)組（箱子的初始位置）
　　小烏龜?shù)臄?shù)據(jù)，json對象
　　每一個關(guān)卡都有對應(yīng)的游戲關(guān)卡數(shù)據(jù)， 模擬的數(shù)據(jù)如下：

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

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

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

JavaScript編寫推箱子游戲_javascript技巧

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

推薦度：

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