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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
个人小程序接入支付解决方案
May 23 Javascript
Javascript模块化机制实现原理详解
Apr 02 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
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
利用Python获取操作系统信息实例
2016/09/02 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python中必要的名词解释
2019/11/20 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
会计实习生自我鉴定
2013/12/12 职场文书
个人银行贷款担保书
2014/04/01 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
物业管理专业自荐信
2014/07/01 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
js Proxy的原理详解
2021/05/25 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android