快好知 kuaihz订阅观点

 

Axure教程:冰球小游戏

年底了,闲来无事,逛产品网站时看到一些大佬的小游戏制作教程,受益匪浅,突发奇想,做了一个冰球类的小游戏与大家交流学习。

游戏玩法

少废话,先看东西 冰球游戏>>

游戏规则很简单,小球有初始速度自动降落,用户水平拖动红色方块接球反弹,与机器人对战,若球碰到左右两侧墙壁则反弹。一方没有接住球则游戏结束。

游戏功能梳理

游戏可设置难度。

小球可自动运动,碰到墙壁或者方块则反弹。

用户可水平拖动方块接球反弹。

机器人会自动跟踪接球。

一方未接住球,则分出胜负。

核心难点解析

小球如何移动:利用动态面板中不断向下重复循环改变面板状态,每改变一次状态小球移动一次位置来实现小球的无限运动。【不好理解可接着往下看,下文中有实现教程】

核心中的核心当然是小球的运动路径:

小球接触左右边界时反弹,即y轴运动方向不变,x轴运动方向相反。

小球碰到上下的运动方块时反弹,即y轴方向相反,x轴运动方向可设置成随机或者是根据小球与方块接触部位来规定不同的运动方向。本文选择前者,x轴运动方向随机。

游戏的另一个重点是机器人如何接球:为机器人设定接球范围,当小球进入机器人的接球范围时,则机器人水平移动到小球所在的区域

制作过程

1. 元件准备

元件较为简单,主要是上下左右四个边界,左右边界可以设置成白色,可以更好地隐藏。

机器人方块,和我方方块(我方方块需要可拖动,所以设置成动态面板)。

小球,以及控制小球移动的动态面板。

2. 移动小球

设置全局变量 dx、dy控制小球运动方向,robot控制机器人反应区域、angle控制机器人击球角度。

单击“开始”时,设置“yidong”动态面板向下循环,循环间隔1ms。

“yidong”动态面板状态改变时,移动小球采用“相对移动”,移动dx,dy。

3. 控制小球

小球接触我方方块时,dy=[[-dy]],dx=[[(Math.random()-0.5)*32]]

小球接触机器人时,dy=[[-dy]],dx=[[(Math.random()-0.5)*angle]],angle可控制机器人反弹角度。

小球接触左右边界时:dx=[[-dx]]

小球接触上下边界时:游戏结束,暂停“yidong”面板的循环,并显示“弹框”

小球来到机器人响应区域【对应robot变量】则移动机器人

4. 面板移动

设定我方方块为动态面板,并且设定拖动时的拖动边界。

5. 难度设定

改变球的y轴运动速度dy变量、机器人的响应区域robot变量、机器人的反弹角度angle变量,来调节游戏难度。

6. 其他

至此,游戏基本功能就都做好了,但是还有几个方面可以继续完善,比如

小球偶尔会卡在墙上或者方块上。

游戏还可以加入计分系统。

小球每1ms检测一次运动,导致运动起来有时候会稍微卡顿。可以适当加长时间间隔,加入“线性移动”使小球移动更顺畅。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:Axure教程:冰球小游戏  冰球  冰球词条  小游戏  小游戏词条  教程  教程词条  Axure  Axure词条  
原型

 AxShare太慢?试试用Cod...

文章主要分享如何利用Coding+Git来进行原型分享预览。一起来学学吧。简介目前,把Axure原型图给别人预览的方式有如下几种:通过Axure自带的功能发布到...(展开)

原型

 Axure版本管理正确姿势:如何...

产品开发当中,我们很多时候代码和部分文档都有svn或者git工具进行管理,但是原型文件其实也需要很好的管理,特别是2个人以上对同一个rp文件进行频繁修改,没有版...(展开)

原型

 技巧分享:Axure后台组件制作...

大家好,前一段时间我刚刚分享了一篇《打造高品质Axure组件库就是这么简单》,意在分享给大家一个完整的打造axure组件的思维路径。本文着重于整体制作的技巧思路...(展开)