首页 > web前端 > js教程 > 正文

使用Three.js如何实现微信跳一跳游戏

亚连
发布: 2018-06-13 17:34:01
原创
4816人浏览过

最近项目结束,很空闲,于是就试着仿照微信跳一跳写了一个极简版的游戏,到底简单到什么程度呢?大家可以参考下本文

那么这个游戏到底是简单到什么程度,差不多就是到下面这个程度吧

源码地址:  github.com/luosijie/th…

由于是第一次尝试写游戏, 也不知道套路对不对, 大家看着玩就好, 不要太认真, 不推荐在手机上预览, 坑还没有填好

下面是实现过程

游戏分析

首先分析一下一个这样的游戏需要什么元素

  • Three.js必备元素: 场景,灯光,摄像机

  • 一块又一块的方块

  • 会跳的那个 ,或者叫游戏者

  • 以上

游戏过程

  • 初始一个场景, 场景中有一个 会跳的那个 和 2个方块

  • 鼠标按下储存 能量值

  • 鼠标放开, 会跳的那个 根据 能量值 和 第2个方块的方向 跳出去

  • 会跳的那个 落到方块的上平面时, 根据 位置 判断这一跳是成功还是失败

  • 成功后进入下一步,失败就根据 位置 执行不同的摔倒方式

关于游戏的碰撞, 我们要考虑这几种情况

1.掉落在两个方块中央

微信 WeLM
微信 WeLM

WeLM不是一个直接的对话机器人,而是一个补全用户输入信息的生成模型。

微信 WeLM 33
查看详情 微信 WeLM

  

2. 掉落在起跳方块左边上沿

  

3. 掉落在左边下一个方块下沿

  

4. 掉落在左边下一个方块上沿

 

5. 掉落在起跳方块右边上沿

 

6. 掉落在右边下一个方块下沿

 

7. 掉落在右边下一个方块上沿

 

代码

感兴趣的麻烦移步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) {
 ...
}
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中如何引用阿里字体图标的方法

通过Node.js使用MySQL连接池

在vue.js中如何使用ajax渲染页面

ajax请求+vue.js渲染+页面加载

以上就是使用Three.js如何实现微信跳一跳游戏的详细内容,更多请关注php中文网其它相关文章!

微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号