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

游戏玩法

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

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

游戏功能梳理

1. 游戏可设置难度。
2. 小球可自动运动，碰到墙壁或者方块则反弹。
3. 用户可水平拖动方块接球反弹。
4. 机器人会自动跟踪接球。
5. 一方未接住球，则分出胜负。

核心难点解析

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

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

• 当小球接触左右边界时反弹，即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. 其他

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

1. 小球偶尔会卡在墙上或者方块上。
2. 游戏还可以加入计分系统。
3. 小球每1ms检测一次运动，导致运动起来有时候会稍微卡顿。可以适当加长时间间隔，加入“线性移动”使小球移动更顺畅。

本文由 @Carlus 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议