Three.js 再探 - 寫一個微信跳一跳極簡版游戲

更新時間：2018年01月04日 09:10:17 作者：JesseLuo

最近項目結束，很空閑，于是就試著仿照微信跳一跳寫了一個極簡版的游戲，到底簡單到什么程度呢?大家可以參考下本文

那么這個游戲到底是簡單到什么程度，差不多就是到下面這個程度吧

源碼地址: github.com/luosijie/th…

由于是第一次嘗試寫游戲, 也不知道套路對不對, 大家看著玩就好, 不要太認真, 不推薦在手機上預覽, 坑還沒有填好

下面是實現過程

游戲分析

首先分析一下一個這樣的游戲需要什么元素

Three.js必備元素: 場景，燈光，攝像機
一塊又一塊的方塊
會跳的那個，或者叫游戲者
以上

游戲過程

初始一個場景, 場景中有一個會跳的那個和 2個方塊
鼠標按下儲存能量值
鼠標放開, 會跳的那個根據能量值和第2個方塊的方向跳出去
會跳的那個落到方塊的上平面時, 根據位置判斷這一跳是成功還是失敗
成功后進入下一步，失敗就根據位置執(zhí)行不同的摔倒方式

關于游戲的碰撞, 我們要考慮這幾種情況

1.掉落在兩個方塊中央

2. 掉落在起跳方塊左邊上沿

3. 掉落在左邊下一個方塊下沿

4. 掉落在左邊下一個方塊上沿

5. 掉落在起跳方塊右邊上沿

6. 掉落在右邊下一個方塊下沿

7. 掉落在右邊下一個方塊上沿

代碼

感興趣的麻煩移步github

主體結構

var Game = function () {
 ...
}
Game.prototype = {
 init: // 初始化
 restart: // 重新開始
 addSuccessFn: // 成功進入下一步，執(zhí)行外部函數, 用于更新分數
 addFailedFn: // 游戲失敗, 執(zhí)行外部函數, 用于顯示失敗彈窗
 _createJumper: // 創(chuàng)建 會跳的那個
 _createCube: // 創(chuàng)建方塊
 _setLight: // Three.js設置光照
 _setCamera: // Three.js設置相機
 _setRenderer: // Three.js設置渲染器
 _render: // Three.js 執(zhí)行渲染
 _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)
...
// 游戲重新開始，執(zhí)行函數
function restart () {
 ...
}
// 游戲失敗執(zhí)行函數
function failed(){
 ...
}
// 游戲成功，更新分數
function success (score) {
 ...
}

總結

以上所述是小編給大家介紹的Three.js 再探 - 寫一個微信跳一跳極簡版游戲，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: