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遊戲開發》（人民郵電出版社）。