Three.js 再探 - 寫一個微信跳一跳極簡版游戲
那么這個游戲到底是簡單到什么程度,差不多就是到下面這個程度吧
源碼地址: github.com/luosijie/th…
由于是第一次嘗試寫游戲, 也不知道套路對不對, 大家看著玩就好, 不要太認(rèn)真, 不推薦在手機(jī)上預(yù)覽, 坑還沒有填好
下面是實(shí)現(xiàn)過程
游戲分析
首先分析一下一個這樣的游戲需要什么元素
- Three.js必備元素: 場景,燈光,攝像機(jī)
- 一塊又一塊的方塊
- 會跳的那個 ,或者叫游戲者
- 以上
游戲過程
- 初始一個場景, 場景中有一個 會跳的那個 和 2個方塊
- 鼠標(biāo)按下儲存 能量值
- 鼠標(biāo)放開, 會跳的那個 根據(jù) 能量值 和 第2個方塊的方向 跳出去
- 會跳的那個 落到方塊的上平面時, 根據(jù) 位置 判斷這一跳是成功還是失敗
- 成功后進(jìn)入下一步,失敗就根據(jù) 位置 執(zhí)行不同的摔倒方式
關(guān)于游戲的碰撞, 我們要考慮這幾種情況
1.掉落在兩個方塊中央
2. 掉落在起跳方塊左邊上沿
3. 掉落在左邊下一個方塊下沿
4. 掉落在左邊下一個方塊上沿
5. 掉落在起跳方塊右邊上沿
6. 掉落在右邊下一個方塊下沿
7. 掉落在右邊下一個方塊上沿
代碼
感興趣的麻煩移步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)建 會跳的那個 _createCube: // 創(chuàng)建方塊 _setLight: // Three.js設(shè)置光照 _setCamera: // Three.js設(shè)置相機(jī) _setRenderer: // Three.js設(shè)置渲染器 _render: // Three.js 執(zhí)行渲染 _createHelpers: // Three.js場景輔助工具 _checkUserAgent: // 檢測是否是移動端 _handleWindowResize: // 窗口縮放綁定函數(shù) _handleMousedown: // 鼠標(biāo)按下綁定函數(shù) _handleMouseup: // 鼠標(biāo)松開綁定函數(shù) _fallingRotate: // 會跳的那個 摔落動畫 _falling: // 會跳的那個 摔落 _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) { ... }
總結(jié)
以上所述是小編給大家介紹的Three.js 再探 - 寫一個微信跳一跳極簡版游戲,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
舉例講解JavaScript substring()的使用方法
這篇文章主要通過舉例的方法講解了javaScript substring()的用法,substring() 方法用于提取字符串中介于兩個指定下標(biāo)之間的字符,感興趣的小伙伴們可以參考一下2015-11-11js的壓縮及jquery壓縮探討(提高頁面加載性能/保護(hù)勞動成果)
搞定js的加密和壓縮,一方面可以提高頁面加載性能,另外一方面也希望辛苦研發(fā)出來的成果得到一定的保護(hù),感興趣的朋友可以了解下,或許對你有所幫助2013-01-01關(guān)于vite?+?ts?找不到模塊@/xxxx?或其相應(yīng)的類型聲明問題
這篇文章主要介紹了vite?+?ts?找不到模塊@/xxxx?或其相應(yīng)的類型聲明,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06深入理解JavaScript系列(28):設(shè)計模式之工廠模式詳解
這篇文章主要介紹了深入理解JavaScript系列(28):設(shè)計模式之工廠模式詳解,工廠模式定義一個用于創(chuàng)建對象的接口,這個接口由子類決定實(shí)例化哪一個類,需要的朋友可以參考下2015-03-03基于Express框架使用POST傳遞Form數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了基于Express框架使用POST傳遞Form數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-08-08