那么這個游戲到底是簡單到什么程度,差不多就是到下面這個程度吧
源碼地址: github.com/luosijie/th…
由于是第一次嘗試寫游戲, 也不知道套路對不對, 大家看著玩就好, 不要太認真, 不推薦在手機上預覽, 坑還沒有填好
下面是實現過程
游戲分析
首先分析一下一個這樣的游戲需要什么元素
Three.js必備元素: 場景,燈光,攝像機
一塊又一塊的方塊
會跳的那個 ,或者叫游戲者
以上
游戲過程
初始一個場景, 場景中有一個 會跳的那個 和 2個方塊
鼠標按下儲存 能量值
鼠標放開, 會跳的那個 根據 能量值 和 第2個方塊的方向 跳出去
會跳的那個 落到方塊的上平面時, 根據 位置 判斷這一跳是成功還是失敗
成功后進入下一步,失敗就根據 位置 執行不同的摔倒方式
關于游戲的碰撞, 我們要考慮這幾種情況
1.掉落在兩個方塊中央
2. 掉落在起跳方塊左邊上沿
3. 掉落在左邊下一個方塊下沿
4. 掉落在左邊下一個方塊上沿
5. 掉落在起跳方塊右邊上沿
6. 掉落在右邊下一個方塊下沿
7. 掉落在右邊下一個方塊上沿
代碼
感興趣的麻煩移步github
主體結構
var Game = function () { ... } Game.prototype = { init: // 初始化 restart: // 重新開始 addSuccessFn: // 成功進入下一步,執行外部函數, 用于更新分數 addFailedFn: // 游戲失敗, 執行外部函數, 用于顯示失敗彈窗 _createJumper: // 創建 會跳的那個 _createCube: // 創建方塊 _setLight: // Three.js設置光照 _setCamera: // Three.js設置相機 _setRenderer: // Three.js設置渲染器 _render: // Three.js 執行渲染 _createHelpers: // Three.js場景輔助工具 _checkUserAgent: // 檢測是否是移動端 _handleWindowResize: // 窗口縮放綁定函數 _handleMousedown: // 鼠標按下綁定函數 _handleMouseup: // 鼠標松開綁定函數 _fallingRotate: // 會跳的那個 摔落動畫 _falling: // 會跳的那個 摔落 _checkInCube: // 判斷落點位置 _updateCameraPos: // 更新相機坐標參數 _updateCamera: // 更新相機 _setSize: // 設置畫布尺寸 }
調用
var game = new Game(success,failed) game.init() game.addSuccessFn(success) game.addFailedFn(failed) ... // 游戲重新開始,執行函數 function restart () { ... } // 游戲失敗執行函數 function failed(){ ... } // 游戲成功,更新分數 function success (score) { ... }
上面是我整理給大家的,希望今后會對大家有幫助。
相關文章:
在vue中如何引用阿里字體圖標的方法
通過Node.js使用MySQL連接池
在vue.js中如何使用ajax渲染頁面
ajax請求+vue.js渲染+頁面加載
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。