HTML5游戏开发中的抛物线原理

游戏开发中的抛物线运动原理浅析

我们在游戏开发时常常需要处理抛物线运动，如炮弹的发射、物品的投掷。热门的游戏“愤怒的小鸟”就用到抛物线的处理，现在就来讲解一下。

抛物线运动可以分解成水平匀速运动和垂直匀加速度运动，垂直方向加速度即重力加速度。
我们以固定时间间隔发生的事件来产生动画，假设固定时间间隔为1，则在固定时间间隔内产生的位移即速度×1，也即与速度相等，所以我们把速度简化成位移。水平位移不需多说，在垂直位移处理上采用一个简单的物理模型：改变垂直位移（增加一个常量），然后计算原位移和新位移的平均值来计算新位置，据此得出一个新的垂直位移。

• 水平位移（变量dx）就是水平速度，不会改变。代码为：dx=horvelocity;。
• 时间间隔开始时的垂直速度是verticalvel1。
• 时间间隔结束时的垂直速度是verticalvel1加上加速度（gravity）。代码为：verticalvel2=verticalvel1+gravity;。
• 这个时间间隔的垂直位移（dy）就是verticalvel1和verticalvel2的平均值。代码为：dy=(verticalvel1+verticalvel2)*0.5。

点A(x1,y1)和点B(x2,y2)是已知的两个点，它们确定了物体发射的角度和速度。iniSpeed为初始发射速度，它的大小可以设计为与点A到点B的距离成正比。angleradians为发射方向与x轴的夹角，这里是弧度。怎么计算水平angleradians弧度呢？我们用到javascript自带的数学函数：Math.atan2(y2-y1,x2-x1)。Math.atan2()是反正切函数的变种。知道了angleradians就可以计算水平速度和初始垂直速度，这里分别用到余弦Math.cos()和正弦Math.sin()。

• 初始速度iniSpeed与A(x1,y1)、B(x2,y2)距离成正比，比例系数可以自己测试设定，AB距离可以根据两点的坐标计算得到。
• angleradians根据反正切函数计算得到。代码为：angleradians=Math.atan2(y2-y1,x2-x1);//得到的是弧度。
• 水平速度horvelocity用余弦函数计算得到。代码为：horvelocity=iniSpeed*Math.cos(angleradians);。
• 垂直的初始速度verticalvel1可以用正弦函数得到。代码为：verticalvel1=iniSpeed*Math.sin(angleradians);。

一个时间间隔内就是以上所说的那样，到下一个时间间隔水平速度horvelocity不变。垂直速度则用verticalvel2替换verticalvel1成为新的间隔开始垂直速度。代码：verticalvel1=verticalvel2;。每次间隔得到的水平位移dx，垂直位移dy可以经处理显示图像的变化。

详细游戏开发过程请参考《HTML5游戏开发》（人民邮电出版社）。