Three.js 再探 - 寫一個跳一跳極簡版遊戲

最近在離職的空窗期，感受大把的時間不能用來浪費，就試着仿照微信跳一跳寫了一個極簡版的遊戲

那麼這個遊戲究竟是簡單到什麼程度，差很少就是到下面這個程度吧

預覽地址: https://luosijie.github.io/threejs-examples/jump/jump.html

源碼地址: https://github.com/luosijie/threejs-examples/tree/master/jump

因爲是第一次嘗試寫遊戲, 也不知道套路對不對, 你們看着玩就好, 不要太認真, 不推薦在手機上預覽, 坑尚未填好

下面是實現過程

遊戲分析

首先分析一下一個這樣的遊戲須要什麼元素

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

遊戲過程

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

關於遊戲的碰撞, 咱們要考慮這幾種狀況

1. 掉落在兩個方塊中央

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

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

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

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

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

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

代碼

感興趣的麻煩移步 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()
game.init()
game.addSuccessFn(success)
game.addFailedFn(failed)

...

// 遊戲從新開始，執行函數
function restart () {
    ...
}
// 遊戲失敗執行函數
function failed(){
    ...
}
// 遊戲成功，更新分數
function success (score) {
    ...
}

最後有什麼好玩的js相關, 歡迎一塊兒交流

先這樣了, 歡迎star