您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Three.js如何實(shí)現(xiàn)一個(gè)微信跳一跳游戲的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
效果如下:
由于是第一次嘗試寫游戲, 也不知道套路對不對, 大家看著玩就好, 不要太認(rèn)真, 不推薦在手機(jī)上預(yù)覽, 坑還沒有填好
下面是實(shí)現(xiàn)過程
游戲分析
首先分析一下一個(gè)這樣的游戲需要什么元素
Three.js必備元素: 場景,燈光,攝像機(jī)
一塊又一塊的方塊
會(huì)跳的那個(gè) ,或者叫游戲者
以上
游戲過程
初始一個(gè)場景, 場景中有一個(gè) 會(huì)跳的那個(gè) 和 2個(gè)方塊
鼠標(biāo)按下儲(chǔ)存 能量值
鼠標(biāo)放開, 會(huì)跳的那個(gè) 根據(jù) 能量值 和 第2個(gè)方塊的方向 跳出去
會(huì)跳的那個(gè) 落到方塊的上平面時(shí), 根據(jù) 位置 判斷這一跳是成功還是失敗
成功后進(jìn)入下一步,失敗就根據(jù) 位置 執(zhí)行不同的摔倒方式
關(guān)于游戲的碰撞, 我們要考慮這幾種情況
1.掉落在兩個(gè)方塊中央
2. 掉落在起跳方塊左邊上沿
3. 掉落在左邊下一個(gè)方塊下沿
4. 掉落在左邊下一個(gè)方塊上沿
5. 掉落在起跳方塊右邊上沿
6. 掉落在右邊下一個(gè)方塊下沿
7. 掉落在右邊下一個(gè)方塊上沿
代碼
感興趣的麻煩移步github
主體結(jié)構(gòu)
var Game = function () { ... } Game.prototype = { init: // 初始化 restart: // 重新開始 addSuccessFn: // 成功進(jìn)入下一步,執(zhí)行外部函數(shù), 用于更新分?jǐn)?shù) addFailedFn: // 游戲失敗, 執(zhí)行外部函數(shù), 用于顯示失敗彈窗 _createJumper: // 創(chuàng)建 會(huì)跳的那個(gè) _createCube: // 創(chuàng)建方塊 _setLight: // Three.js設(shè)置光照 _setCamera: // Three.js設(shè)置相機(jī) _setRenderer: // Three.js設(shè)置渲染器 _render: // Three.js 執(zhí)行渲染 _createHelpers: // Three.js場景輔助工具 _checkUserAgent: // 檢測是否是移動(dòng)端 _handleWindowResize: // 窗口縮放綁定函數(shù) _handleMousedown: // 鼠標(biāo)按下綁定函數(shù) _handleMouseup: // 鼠標(biāo)松開綁定函數(shù) _fallingRotate: // 會(huì)跳的那個(gè) 摔落動(dòng)畫 _falling: // 會(huì)跳的那個(gè) 摔落 _checkInCube: // 判斷落點(diǎn)位置 _updateCameraPos: // 更新相機(jī)坐標(biāo)參數(shù) _updateCamera: // 更新相機(jī) _setSize: // 設(shè)置畫布尺寸 }
調(diào)用
var game = new Game(success,failed) game.init() game.addSuccessFn(success) game.addFailedFn(failed) ... // 游戲重新開始,執(zhí)行函數(shù) function restart () { ... } // 游戲失敗執(zhí)行函數(shù) function failed(){ ... } // 游戲成功,更新分?jǐn)?shù) function success (score) { ... }
感謝各位的閱讀!關(guān)于“Three.js如何實(shí)現(xiàn)一個(gè)微信跳一跳游戲”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。