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 相关文章推荐
js的.innerHTML = ""IE9下显示有错误的解决方法
Sep 16 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
使用p5.js临摹动态图形
2019/10/23 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
详解Python迭代和迭代器
2016/03/28 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python iter()函数用法实例分析
2018/03/17 Python
对numpy中shape的深入理解
2018/06/15 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
探矿工程师自荐信
2014/01/24 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
世界名著读书笔记
2015/06/25 职场文书
董事长致辞
2015/07/29 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技