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 闭包疑问
Dec 30 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
js实现微信分享代码
Oct 11 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
详解webpack 多入口配置
Jun 16 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
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
解析php常用image图像函数集
2013/06/24 PHP
解析link_mysql的php版
2013/06/30 PHP
ucenter通信原理分析
2015/01/09 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
运算符&&的三个不同层次
2013/04/07 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
使用Python绘制图表大全总结
2017/02/11 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python Socket使用实例
2017/12/18 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
python实现小球弹跳效果
2019/05/10 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
三好学生自我鉴定
2013/12/17 职场文书
计算机学生求职信范文
2014/01/30 职场文书
求职意向书范本
2015/05/11 职场文书
医院见习总结
2015/06/24 职场文书
教师节班会主持词
2015/07/06 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python