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

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

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

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

下面是实现过程

游戏分析

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

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

游戏过程

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

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

1.掉落在两个方块中央

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) {
 ...
}

总结

以上所述是小编给大家介绍的Three.js 再探 - 写一个微信跳一跳极简版游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 利用Kotlin实现破解Android版的微信小游戏--跳一跳

    利用Kotlin实现破解Android版的微信小游戏--跳一跳

    前言 昨天下午,微信小程序开放了游戏接口,朋友圈瞬间炸开了锅,尤其是"跳一跳"这款游戏的成绩单,在朋友圈刷了一波又一波. 下面就来给大家介绍了关于Kotlin破解Android版的微信小游戏跳一跳的相关内容,让大家可以好好炫耀一番. 成果 跳一跳 微信小程序可以玩游戏了,我们来破解一下<跳一跳>这个官方出品的小游戏吧. 思路 用usb调试安卓手机,用adb截图并用鼠标测量距离,然后计算按压时间后模拟按压. $ adb shell input swipe <x1>

  • Android版微信跳一跳小游戏利用技术手段达到高分的操作方法

    Android版微信跳一跳小游戏利用技术手段达到高分的操作方法

    本文主要来讲个个好玩的东西,近来微信刚出的跳一跳微信小程序的游戏很火,看到很多人都达到了二三百分就各种刷朋友圈了. 甩手一个表情 最终我们达到的分数却是这样的: 羡慕吧 一定会有人拍手叫好,"黄金右手"!说真的,我已经不用右手好多年,而且我玩这个游戏压根就没用手,而是意念!哈哈,别喷我,开个玩笑而已,肯定是利用技术手段啦,什么技术?python喽-哈哈,不过不是我写的,我自己是做Android开发的,我对于python从来没有接触,只是恰好在蛋哥公众号看到关于这个游戏的文章,觉得有意思

  • .NET开发实现一个微信跳一跳的辅助程序

    .NET开发实现一个微信跳一跳的辅助程序

    前言 相信大家应该都知道了,最近微信更新了,出现了一个小游戏"跳一跳",玩了一下 赶紧还蛮有意思的 但纯粹是拼手感的,玩了好久,终于搞了个135分拿了个第一名,没想到过一会就被朋友刷下去了,最高的也就200来分把,于是就想着要是开发个辅助就好了,于是简单想了一下最高游戏 先来说下这个游戏的界面和规则: 先看看界面 规则: 按住屏幕 按一定时间松开就可以跳跃,跳跃到前方的图案中得1分,图按中间得2分(连续多个中间累加2分,比如第一个2分 第二个4分 第三个6分 最高累计32分) 其它规则

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

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

    那么这个游戏到底是简单到什么程度,差不多就是到下面这个程度吧 源码地址:  github.com/luosijie/th- 由于是第一次尝试写游戏, 也不知道套路对不对, 大家看着玩就好, 不要太认真, 不推荐在手机上预览, 坑还没有填好 下面是实现过程 游戏分析 首先分析一下一个这样的游戏需要什么元素 Three.js必备元素: 场景,灯光,摄像机 一块又一块的方块 会跳的那个 ,或者叫游戏者 以上 游戏过程 初始一个场景, 场景中有一个 会跳的那个 和 2个方块 鼠标按下储存 能量值 鼠标放

  • 100行java写的微信跳一跳辅助程序

    100行java写的微信跳一跳辅助程序

    前几天没事干看别人一直在玩微信上线的那一个跳一跳小游戏,玩着玩着老是掉下去,闲着没事呗就想了想做一个辅助程序的呗.不过先做的手动版的.自动版的有点麻烦.就不发了.用的Java写的,也就一个蒙版. 下面就开始介绍我的小程序,没好多东西,真正的代码应该就是100行左右,没啥难的. 下面这是我的微信朋友们的跳一跳 也就这样吧,因为wechat还是有那个仿作弊系统的,所以还是低调的吧... 话不多说,还是下面奉上我的code吧,说多了墨迹呢.... package com.rain.jump.util;

  • 基于VS+Opencv2.4.10微信跳一跳辅助工具

    基于VS+Opencv2.4.10微信跳一跳辅助工具

    最近微信的跳一跳小程序可谓火了一把,不是因为它本身多好玩,而是有大部分的程序员们加入其中,利用各种领域方法,实现了微信跳一跳的外挂,分数轻松上千或上万.之前也看了基于Python开源的代码,GitHub上现在的star已经快超过1W了,简直不敢想.趁着今天礼拜天,在实验室中也简单的实现了一下微信跳一跳的辅助工具,精度还不够高,我跑了一下才到90,纯属娱乐好玩的,后期再继续改进,主要是依赖C++来实现了一下. 环境: Win10+VS2012+Opencv2.4.10+ADB工具 环境的搭建请查阅

  • 微信跳一跳游戏Android刷分代码

    本文实例为大家分享了微信跳一跳游戏Android实现刷分,供大家参考,具体内容如下 # coding:utf-8 ''' # === 思路 === # 核心:每次落稳之后截图,根据截图算出棋子的坐标和下一个块顶面的中点坐标, # 根据两个点的距离乘以一个时间系数获得长按的时间 # 识别棋子:靠棋子的颜色来识别位置,通过截图发现最下面一行大概是一条直线,就从上往下一行一行遍历, # 比较颜色(颜色用了一个区间来比较)找到最下面的那一行的所有点,然后求个中点, # 求好之后再让 Y 轴坐标减小棋子底

  • 微信跳一跳python辅助脚本（总结）

    微信跳一跳python辅助脚本（总结）

    这段时间微信跳一跳这个游戏非常火爆,但是上分又非常的难,对于程序员来说第一个念头就是通过写一个辅助脚本外挂让上分变的容易,python现在比较火,我们一起来以python语言为基础总结以下各路神仙写的关于跳一跳的辅助脚本,大家在学习的时候主要理解他们的写法思路,对你学习python非常的有帮助. 1.微信跳一跳自动运行python脚本 注解:思路 核心:每次落稳之后截图,根据截图算出棋子的坐标和下一个块顶面的中点坐标, 根据两个点的距离乘以一个时间系数获得长按的时间 识别棋子:靠棋子的颜色来识别

  • C#图像识别 微信跳一跳机器人

    C#图像识别 微信跳一跳机器人

    更新 GitHub中所有类库的源码已经转换为C#版本. 准备 IDE:VisualStudio Language:C#/VB.NET GitHub:AutoJump.NET 本文将向你介绍一种通过图像识别实现"跳一跳"机器人的方法. 第一节 图像识别 文中提到的所有方法和步骤只涉及简单的向量计算. 需要用到哪些计算? 比较像素点的颜色 求向量集合的中心 计算颜色的相似度 一个RGB颜色可以看作一个三维向量 比较两个颜色的相似度可以计算它们的欧几里得距离 也可以直接比较它们的夹角:夹角越

  • 手把手教你写一个微信小程序（推荐）

    需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置 小程序的所有页面路径.界面表现.网络超时时间.底部 tab 需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,

  • js和css写一个可以自动隐藏的悬浮框

    js和css写一个可以自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态: 左边那一条窄线就是隐藏以后的悬浮框. 显示状态: 当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CSS样式:

  • C#实现微信跳一跳小游戏的自动跳跃助手开发实战

    C#实现微信跳一跳小游戏的自动跳跃助手开发实战

    一.前言: 前段时间微信更新了新版本后,带来的一款H5小游戏"跳一跳"在各朋友圈里又火了起来,类似以前的"打飞机"游戏,这游戏玩法简单,但加上了积分排名功能后,却成了"装逼"的地方,于是很多人花钱花时间的刷积分抢排名.后来越来越多的聪明的"程序哥们"弄出了不同方式不同花样的跳一跳助手(外挂?),有用JS实现的.有JAVA实现的.有Python实现的,有直接物理模式的.有机械化的.有量尺子的等等,简直是百花齐放啊-- 赶一下潮流

随机推荐