当前位置: 首页 > news >正文

Three.js 再探 - 写一个跳一跳极简版游戏

最近在离职的空窗期,感觉大把的时间不能用来浪费,就试着仿照微信跳一跳写了一个极简版的游戏

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

图片预览1
图片预览2
图片预览3

预览地址: https://luosijie.github.io/threejs-examples/jump/jump.html

源码地址: https://github.com/luosijie/threejs-examples/tree/master/jump

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

下面是实现过程

游戏分析

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

  1. Three.js必备元素: 场景,灯光,摄像机
  2. 一块又一块的方块
  3. 会跳的那个,或者叫游戏者
  4. 以上

游戏过程

  1. 初始一个场景, 场景中有一个 会跳的那个 和 2个方块
  2. 鼠标按下储存 能量值
  3. 鼠标放开, 会跳的那个 根据 能量值 和 第2个方块的方向 跳出去
  4. 会跳的那个 落到方块的上平面时, 根据 位置 判断这一跳是成功还是失败
  5. 成功后进入下一步,失败就根据 位置 执行不同的摔倒方式

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

  1. 掉落在两个方块中央

图片描述

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

图片描述

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

图片描述

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

图片描述

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

图片描述

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

图片描述

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

图片描述

代码

感兴趣的麻烦移步 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()
game.init()
game.addSuccessFn(success)
game.addFailedFn(failed)

...

// 游戏重新开始,执行函数
function restart () {
    ...
}
// 游戏失败执行函数
function failed(){
    ...
}
// 游戏成功,更新分数
function success (score) {
    ...
}

最后有什么好玩的js相关, 欢迎一起交流

先这样了, 欢迎star

相关文章:

  • java中的IO整理(转)
  • collections工具类 排序
  • 安全框架 - Shiro与springMVC整合的注解以及JSP标签
  • Design Pattern: Builder 模式
  • xml 相关操作
  • activity添加切换动画之后出现的黑色背景问题
  • GNU make manual 翻译( 一百五十八)
  • Linux自学笔记——nginx详解
  • POJ 1722 DP
  • centos搭建ssh
  • Direct2D入门
  • Mina2.0框架源码剖析(二)
  • 64位ubuntu下安装32位jdk
  • response.setHeader()的用法
  • PCIE BAR空间
  • @jsonView过滤属性
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 【Linux系统编程】快速查找errno错误码信息
  • HTTP那些事
  • HTTP中GET与POST的区别 99%的错误认识
  • JS函数式编程 数组部分风格 ES6版
  • linux安装openssl、swoole等扩展的具体步骤
  • miaov-React 最佳入门
  • mongo索引构建
  • Python爬虫--- 1.3 BS4库的解析器
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • Zsh 开发指南(第十四篇 文件读写)
  • 测试开发系类之接口自动化测试
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 看图轻松理解数据结构与算法系列(基于数组的栈)
  • 聊聊flink的BlobWriter
  • 前端性能优化--懒加载和预加载
  • 如何胜任知名企业的商业数据分析师?
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 使用 QuickBI 搭建酷炫可视化分析
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • #我与Java虚拟机的故事#连载14:挑战高薪面试必看
  • (Redis使用系列) Springboot 使用Redis+Session实现Session共享 ,简单的单点登录 五
  • (二十一)devops持续集成开发——使用jenkins的Docker Pipeline插件完成docker项目的pipeline流水线发布
  • (理论篇)httpmoudle和httphandler一览
  • (强烈推荐)移动端音视频从零到上手(下)
  • (十二)springboot实战——SSE服务推送事件案例实现
  • (十一)JAVA springboot ssm b2b2c多用户商城系统源码:服务网关Zuul高级篇
  • (算法)求1到1亿间的质数或素数
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • 、写入Shellcode到注册表上线
  • .bat批处理(二):%0 %1——给批处理脚本传递参数
  • .Net 6.0 处理跨域的方式
  • .net core 客户端缓存、服务器端响应缓存、服务器内存缓存
  • .NET 材料检测系统崩溃分析
  • .NET框架
  • .net中调用windows performance记录性能信息
  • /etc/fstab和/etc/mtab的区别
  • /etc/sudoer文件配置简析