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里怎么取select标签里的值并修改
Dec 10 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
浅析vue中的MVVM实现原理
Mar 04 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 array 的加法操作代码
2010/07/24 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php header函数的常用http头设置
2015/06/25 PHP
php简单防盗链实现方法
2015/07/29 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
DOM事件探秘篇
2017/02/15 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python list语法学习(带例子)
2013/11/01 Python
python实现计算倒数的方法
2015/07/11 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
如何通过python实现人脸识别验证
2020/01/17 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
高中自我评价范文
2014/01/27 职场文书
进步之星获奖感言
2014/02/22 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS