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

JesseLuo發表於2018-01-03
JS遊戲

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

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

預覽1
預覽2
預覽3

預覽地址: luosijie.github.io/threejs-exa…

原始碼地址: github.com/luosijie/th…

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

下面是實現過程

遊戲分析

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

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

遊戲過程

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

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

  1. 掉落在兩個方塊中央

掉落在兩個方塊中央
2. 掉落在起跳方塊左邊上沿

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

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

掉落在左邊下一個方塊上
5. 掉落在起跳方塊右邊上沿

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

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

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

程式碼

感興趣的麻煩移步 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

相關文章