当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Three.js 再探 - 写一个微信跳一跳极简版游戏

Three.js 再探 - 写一个微信跳一跳极简版游戏

2018年02月03日  | 移动技术网IT编程  | 我要评论

那么这个游戏到底是简单到什么程度，差不多就是到下面这个程度吧

源码地址:  

由于是第一次尝试写游戏, 也不知道套路对不对, 大家看着玩就好, 不要太认真, 不推荐在手机上预览, 坑还没有填好

下面是实现过程

游戏分析

首先分析一下一个这样的游戏需要什么元素

  • three.js必备元素: 场景，灯光，摄像机
  • 一块又一块的方块
  • 会跳的那个 ，或者叫游戏者
  • 以上

游戏过程

  • 初始一个场景, 场景中有一个 会跳的那个 和 2个方块
  • 鼠标按下储存 能量值
  • 鼠标放开, 会跳的那个 根据 能量值 和 第2个方块的方向 跳出去
  • 会跳的那个 落到方块的上平面时, 根据 位置 判断这一跳是成功还是失败
  • 成功后进入下一步，失败就根据 位置 执行不同的摔倒方式

关于游戏的碰撞, 我们要考虑这几种情况

1.掉落在两个方块中央

  

2. 掉落在起跳方块左边上沿

  

3. 掉落在左边下一个方块下沿

  

4. 掉落在左边下一个方块上沿

 

5. 掉落在起跳方块右边上沿

 

6. 掉落在右边下一个方块下沿

 

7. 掉落在右边下一个方块上沿

 

代码

感兴趣的麻烦移步

主体结构

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(success,failed)
game.init()
game.addsuccessfn(success)
game.addfailedfn(failed)
...
// 游戏重新开始，执行函数
function restart () {
 ...
}
// 游戏失败执行函数
function failed(){
 ...
}
// 游戏成功，更新分数
function success (score) {
 ...
}

总结

以上所述是小编给大家介绍的three.js 再探 - 写一个微信跳一跳极简版游戏，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网