欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 再探 - 寫一個微信跳一跳極簡版游戲,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • javascript 通過封裝div方式彈出div窗體

    javascript 通過封裝div方式彈出div窗體

    廢話少說,此js對象是通過封裝頁面上的div,將其彈出,可以彈出多個,參考了一些高人代碼,達到我要的效果。先看看效果圖。配合一css就可以很好看了。
    2009-10-10
  • 舉例講解JavaScript substring()的使用方法

    舉例講解JavaScript substring()的使用方法

    這篇文章主要通過舉例的方法講解了javaScript substring()的用法,substring() 方法用于提取字符串中介于兩個指定下標之間的字符,感興趣的小伙伴們可以參考一下
    2015-11-11
  • js的壓縮及jquery壓縮探討(提高頁面加載性能/保護勞動成果)

    js的壓縮及jquery壓縮探討(提高頁面加載性能/保護勞動成果)

    搞定js的加密和壓縮,一方面可以提高頁面加載性能,另外一方面也希望辛苦研發(fā)出來的成果得到一定的保護,感興趣的朋友可以了解下,或許對你有所幫助
    2013-01-01
  • 關于vite?+?ts?找不到模塊@/xxxx?或其相應的類型聲明問題

    關于vite?+?ts?找不到模塊@/xxxx?或其相應的類型聲明問題

    這篇文章主要介紹了vite?+?ts?找不到模塊@/xxxx?或其相應的類型聲明,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-06-06
  • JS實現容器模塊左右拖動效果

    JS實現容器模塊左右拖動效果

    這篇文章主要為大家詳細介紹了JS實現容器模塊左右拖動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • js格式化時間的方法

    js格式化時間的方法

    這篇文章主要介紹了js格式化時間的方法,對javascript時間格式化的方法進行了總結,感興趣的小伙伴們可以參考一下
    2015-12-12
  • 深入理解JavaScript系列(28):設計模式之工廠模式詳解

    深入理解JavaScript系列(28):設計模式之工廠模式詳解

    這篇文章主要介紹了深入理解JavaScript系列(28):設計模式之工廠模式詳解,工廠模式定義一個用于創(chuàng)建對象的接口,這個接口由子類決定實例化哪一個類,需要的朋友可以參考下
    2015-03-03
  • 基于Express框架使用POST傳遞Form數據

    基于Express框架使用POST傳遞Form數據

    這篇文章主要為大家詳細介紹了基于Express框架使用POST傳遞Form數據,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • JS傳參及動態(tài)修改頁面布局

    JS傳參及動態(tài)修改頁面布局

    本篇文章主要介紹了JS傳參及動態(tài)修改頁面布局的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • 原生JS實現小小的音樂播放器

    原生JS實現小小的音樂播放器

    這篇文章主要為大家詳細介紹了原生JS實現音樂播放器,支持循環(huán)、隨機播放,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10

最新評論