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


Posted in Javascript onJanuary 04, 2018

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

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

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

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

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

下面是实现过程

游戏分析

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

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

游戏过程

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

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

1.掉落在两个方块中央

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

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

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

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

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

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

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

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

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

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

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

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

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

代码

感兴趣的麻烦移步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(success,failed)
game.init()
game.addSuccessFn(success)
game.addFailedFn(failed)
...
// 游戏重新开始,执行函数
function restart () {
 ...
}
// 游戏失败执行函数
function failed(){
 ...
}
// 游戏成功,更新分数
function success (score) {
 ...
}

总结

以上所述是小编给大家介绍的Three.js 再探 - 写一个微信跳一跳极简版游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
layui使用及简单的三级联动实现教程
Dec 01 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 #Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 #Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 #Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 #Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 #Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 #Javascript
浅谈node模块与npm包管理工具
Jan 03 #Javascript
You might like
建立动态的WML站点(二)
2006/10/09 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
Firefox div高度自适应
2009/04/28 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python入门教程之运算符与控制流
2016/08/17 Python
Python自动发邮件脚本
2017/03/31 Python
Python入门之后再看点什么好?
2018/03/05 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python中提高pip install速度
2020/02/14 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
运动会入场词200字
2014/02/15 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014年安全员工作总结
2014/11/13 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
法制教育观后感
2015/06/17 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python