Three.js 再探 - 寫(xiě)一個(gè)微信跳一跳極簡(jiǎn)版游戲

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

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

那么這個(gè)游戲到底是簡(jiǎn)單到什么程度，差不多就是到下面這個(gè)程度吧

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

由于是第一次嘗試寫(xiě)游戲, 也不知道套路對(duì)不對(duì), 大家看著玩就好, 不要太認(rèn)真, 不推薦在手機(jī)上預(yù)覽, 坑還沒(méi)有填好

下面是實(shí)現(xiàn)過(guò)程

游戲分析

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

Three.js必備元素: 場(chǎng)景，燈光，攝像機(jī)
一塊又一塊的方塊
會(huì)跳的那個(gè) ，或者叫游戲者
以上

游戲過(guò)程

初始一個(gè)場(chǎng)景, 場(chǎng)景中有一個(gè) 會(huì)跳的那個(gè) 和 2個(gè)方塊
鼠標(biāo)按下儲(chǔ)存能量值
鼠標(biāo)放開(kāi), 會(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: // 重新開(kāi)始
 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場(chǎng)景輔助工具
 _checkUserAgent: // 檢測(cè)是否是移動(dòng)端
 _handleWindowResize: // 窗口縮放綁定函數(shù)
 _handleMousedown: // 鼠標(biāo)按下綁定函數(shù)
 _handleMouseup: // 鼠標(biāo)松開(kāi)綁定函數(shù)
 _fallingRotate: // 會(huì)跳的那個(gè) 摔落動(dòng)畫(huà)
 _falling: // 會(huì)跳的那個(gè) 摔落
 _checkInCube: // 判斷落點(diǎn)位置
 _updateCameraPos: // 更新相機(jī)坐標(biāo)參數(shù)
 _updateCamera: // 更新相機(jī)
 _setSize: // 設(shè)置畫(huà)布尺寸
}

調(diào)用

var game = new Game(success,failed)
game.init()
game.addSuccessFn(success)
game.addFailedFn(failed)
...
// 游戲重新開(kāi)始，執(zhí)行函數(shù)
function restart () {
 ...
}
// 游戲失敗執(zhí)行函數(shù)
function failed(){
 ...
}
// 游戲成功，更新分?jǐn)?shù)
function success (score) {
 ...
}

總結(jié)

以上所述是小編給大家介紹的Three.js 再探 - 寫(xiě)一個(gè)微信跳一跳極簡(jiǎn)版游戲，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: