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

7 years ago

source link: https://juejin.im/post/5a4cc3db6fb9a04514646fd3
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Three.js 再探

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

2018年01月03日 12:02 · 阅读 7493

最近在离职的空窗期，感觉大把的时间不能用来浪费，就试着仿照微信跳一跳写了一个极简版的游戏

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

预览地址: luosijie.github.io/threejs-exa…

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

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

下面是实现过程

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

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

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

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

掉落在两个方块中央

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相关, 欢迎一起交流