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 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 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删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
Yii全局函数用法示例
2017/01/22 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue生命周期实例小结
2018/08/15 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
几个Shell Script面试题
2012/08/31 面试题
早读迟到检讨书
2014/01/24 职场文书
学校门卫岗位职责
2014/03/16 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
大学军训的体会
2014/11/08 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
消防演习通知
2015/04/25 职场文书
物资采购管理制度
2015/08/06 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏