java游戏抛物线方程,有趣的Axure案例:投篮游戏抛物线设计
投篮效果实现的难度主要在于抛物线运动的实现,相比较作者的前几个实例,该实例的运算量要大很多,也是作者首次发现网页出现了卡顿,因此为了保证主要功能运行的流畅,次要功能没有保留。
本实例的特点是:篮球在重力的影响下应该呈现抛物线式的运动。界面中直接给出了游戏的参考线,篮球将会沿着这条线射出,然后在重力的作用下逐渐下降,进入篮筐后得分。
本次制作吸取了像素鸟的教训,没有让背景的云飘起来,这样可以大大减少gif图的体积,从而能够上传游戏流程。
一、成果展示
体验地址:点我体验。
交互说明:
当点击大炮的时候开始进行蓄力,同时上方出现蓄力条;当松手的时候篮球将会射出;篮球的运动轨迹为抛物线,且沿着指导线的方向射出;当篮球进入篮筐后得分并可以进行下一次射击;如果未能够投中,游戏结束,刷新后继续挑战吧。
二、制作过程
1. 背景绘制
同之前的方式一样,首先需要找到免费的素材并下载,然后根据素材的品质调整大小以及扣去背景。并将所有的素材加载到axure之中,然后调整位置大小并将所有素材的位置记录下来。注意这一步以前是没有的,记录素材的位置有利于之后抛物线的实现以及一些逻辑判断。
将所有的元素都摆放整齐之后沿着炮筒的方向画一条直线,作为辅助线帮助用户估计设计的角度。
2. 让辅助线动起来
将辅助线转化为动态面板,设置state1和state2,把state2的线略微进行平移,这样只要频繁切换两个面板就会给人线移动的错觉。面板切换的方式为设置动态面板循环,循环的速度依据实际情况而定,总之感觉不要太违和就可以了。
3. 设置全局变量
本例子的全局变量较多,请大家一定要注意哪个是哪个,一旦稍不注意,就有可能出现错误,且公式复杂,错误的地点并不是很好找。
x代表当前篮球的x坐标,e代表游戏状态,e=0即停止所有运动,time为蓄力时间的计算,score为得分的判定。
4. 计算方程
这是本实例最难的一步,需要大家拿出草稿纸来仔细计算,一旦这里出错,结果将会未知。因为axure没有报错的功能,所以要找到出错的点很难。
计算的思路是这样的。
首先由于篮球是从炮孔出去的,所以该抛物线必然会经过这一个坐标;由于射出的方向是和炮孔平行的,所以这条参考线是该抛物线的一条切线;抛物线的确定需要三个要素,因此以上两个条件约束后将可以得到一个抛物线系;按下的时间将作为最后一个要素将抛物线完全确定。
知道了上述因素,我们大概就有思路了,首先先将方程一一写出来。
抛物线方程:y=ax*x+bx+c;切线方程:求导可以得到y=2ax+b;已知图中篮球的初始位置是(88,431);已知切线的斜率为k=(y1-y2)/(x1-x2);蓄力时间t的获得后面再讲,总之,就是t也是一个已知的量;让t成为该函数的对称轴即t=-2a/b。
通过上面的推倒最后经过计算可以得到结果。
a=0.39/(2*t-176);b=-2*a*t;c=431-7744*a-88*b;运动总方程为y=(0.39/(2*t-176))x*x+-2*(0.39/(2*t-176))*t*x+431-7744*(0.39/(2*t-176))-88*(-2*(0.39/(2*t-176))*t)。
聪明的你一定发现了什么,是的,上面的总方程中没有a,b,c了,t只要已知,就可以绘制出完整的抛物线实现我们的投篮动作了,接下来让我们来思考t的获取。
5. t的获取
上图中的条件是边界判定,否则计时器将会永远运行下去,现在的做法就是将篮球约束在页面内,所以投出去之后篮球才会停下来。该操作time不断进行自加运算,当鼠标停止按的时候直接将动态变量e设置为0,即可以停止计时,这个时候time的数值计做t,通过该数值即可以判断最终抛物线的形状。
上方蓄力条的制作方法也是类似的,只要获取了time,让time成为其长度即可,这样进度条就可以随着time的积累逐渐加长了。
6. 设置球的运动
之前我们已经获取了所有的数据,这里只需要让他们成为小球的x坐标以及y坐标即可。我们可以使用移动功能,将小球移动到绝对位置。
设置方式如上图所示,条件依然是游戏进行与否的判定,主要内容是移动,将小球移动到绝对坐标的位置。最后x=x+100则是x值的循环,只有x不断取新的值才能够让球持续的运行下去。
7. 得分判定
得分判定的设置如上图所示,为接触式判定,在篮筐处放置一个动态面板,当篮球接触该面板的时候发生下列操作,即复位以及分数的增加。
三、写在最后
本实例的难度主要在函数的计算方面,且由于公式复杂,计算频繁,导致实际运行的时候比较卡,作者做的比较简单, 仅仅保留了核心功能。
本实例要注意的点很多,比如:循环的速度、等待的时间、边界的判定,很多数据都是需要不断尝试的,且有可能逻辑会出现矛盾,以及软件本身bug使得某些动作不会进行。
比如:球的旋转,当加上之后性能明显下降,网页运行效率降低;再比如:球落地或者射高后的结束判断则直接不会执行。当然也有可能是作者的逻辑不对,总之最终版删去了不少功能,最后得到了这个稳定的结果。
#专栏作家#
马璐,人人都是产品经理专栏作家。关注产品设计以及用户体验,力求在技术一定的情况下将产品做到极致,充分发挥技术的潜能。
本文原创发布于人人都是产品经理。未经许可,禁止转载
java游戏抛物线方程,有趣的Axure案例:投篮游戏抛物线设计相关推荐
- html打地鼠游戏设计报告,有趣的Axure案例:打地鼠游戏的设计
一个有趣的实例,通过axure制作一个打地鼠的游戏,可以进行难度选择.其中如果选择难度一地鼠为正常大小,选择难度二,地鼠则为缩小版.虽然小游戏很简单,但其中用到的axure技能并不简单,接下来将为大家 ...
- html5实现像素鸟,有趣的Axure案例:像素鸟游戏的设计
原标题:有趣的Axure案例:像素鸟游戏的设计 这是作者第三次发布有关axure游戏的内容了,相比较前两次而言,此次的设计更加完善,难度相应的也要高很多.游戏基本上已经趋于完整,加入了game ove ...
- java计算抛物线的标准方程_抛物线方程公式大全_抛物线的四种标准方程_抛物线公式_抛物线方程及图像_高中数学知识点总结网...
宜城教育资源网www.ychedu.com抛物线方程公式大全_抛物线的四种标准方程_抛物线公式_抛物线方程及图像_高中数学知识点总结网抛物线方程定义编辑抛物线定义:平面内与一个定点F和一条直线l的距离 ...
- Java:计算机编程语言Java的简介、安装(编程环境/工具)、学习路线(如何学习Java以及几十项代码编程案例分析)之详细攻略
Java:计算机编程语言Java的简介.安装(编程环境/工具).学习路线(如何学习Java以及几十项代码编程案例分析)之详细攻略 目录 Java的简介 1.Java的工作原理--基于Eclipse等编 ...
- 自学Java篇之JFrame创建《石头迷阵小游戏》
自学Java篇之JFrame创建<石头迷阵小游戏> 根据黑马程序员java教程自学完java基础,觉得石头迷阵小游戏案例具有一定的编程练习价值,记录之. 最终效果: 案例主要思想流程: ...
- java写的小游戏打砖块_java实现打砖块小游戏
本文实例为大家分享了java实现打砖块小游戏的具体代码,供大家参考,具体内容如下 源码共包含两个文件 文件1:play_zhuankuai.java import java.awt.*; import ...
- python实现简单小游戏_用python开发一个有趣的猜数字小游戏(实现简单的GUI界面学习)...
文章目录 用python开发一个有趣的猜数字小游戏 用于字符串的格式化,通过 {} 和 : 来代替以前的 % 1. python的GUI编程 1.1 pythonGUI常用库对比 Python 提供了 ...
- 学习java :if-else和循环语句 练习案例
案例一: 描述: 从键盘上输入一个整数,判断该数是否是素数.(1不是素数,素数.一个大于1的自然数,除了1和它自身外,不能被其他自然数整除的数叫做质数) 思路: 定义一个for循环和辅助变量i,并给i ...
- 游戏程序设计中有趣的绕轴旋转
前言 在游戏设计中,绕轴旋转综合了位移与旋转两种空间变化,即在通过位移变换得到宏观旋转的效果的同时,物体自身的旋转来保证正确的轴向对齐.在对这一过程执行推导演绎时会设计到一些基本的高中几何数学知识 如 ...
最新文章
- python 栈【测试题】
- matplotlib坐标设置(笔记二)
- cmmi分为哪几个等级?
- 使用CrossApp实现版本更新管理(iOS端给AppStore链接,android端下载apk并替换)
- ArcGIS 解决影像裁剪后锯齿问题
- gopl 底层编程(unsafe包)
- Kata Containers及相关vmm介绍
- CATIA V5 R19 WIN7 64位系统的安装方法
- Ubuntu 20下pycharm无法使用中文输入法
- 4G5G相关缩略词中文及功能简述
- Microsoft office 2007 word PPT 转pdf的插件
- 景深--摄影基础理论(1)
- 给我新人生的skycc营销软件
- 游戏数值策划属性篇(一):关于属性设计的几点思考
- Camstar CDO增加自定义字段
- ####Python 3 Keras YOLO v3解析与实现
- 爬取中关村电脑网惠普电脑各类子品牌报价及相关配置信息
- [MATLAB]将.m文件生成dll文件
- 如何使用Vuex来管理应用程序的状态?
- 成都传智播客新装上线
热门文章
- keras2onnx转换时出现AttributeError: ‘KerasTensor‘ object has no attribute ‘graph’错误
- 为什么要学习函数式编程?因为如果你手里只有锤子,看什么都像钉子
- OGeek网络安全挑战赛圆满收官,OPPO倾力培养高校尖端人才
- mysql optimizer mrr_mysql mrr介绍
- java 构造方法和成员方法_java中构造方法和成员方法的区别
- 内网穿透-神卓互联-香橙派使用帮助教程
- 手游联运是什么意思?
- Oracle没有WM_CONCAT函数的解决办法
- CADENAS为Autodesk云端设计软件提供零部件数据解决方案
- 神奇的不可见空格200b导致代码异常