HTML5 Canvas，如何顯示兩點之間的動畫攻擊

Question

我想在HTML5畫布上顯示兩點（源和目標）之間的攻擊動畫，類似於http://map.ipviking.com/

下面的代碼使導彈的運動在距離短時結束時太慢，並且看起來不像導彈攻擊那樣真實

velocityX = target.x - missile.shift.x;
velocityY = target.y - missile.shift.y;
missile.shift.x += velocityX * .001;
missile.shift.y += velocityY * .001;

請幫忙！

Answer 1

在第1-2行，速度取決於導彈與目標之間的距離，距離越短意味着速度越低。

我想您要尋找的是方向，將其標准化，然后自己選擇速度。

讓我展示一個簡單的例子。

Target is at: [2, 3]
Missile is at: [4, 8]

速度（根據您的公式）是：[2，5]（x和y上的差異分開）“ normalizationFactor”由“畢達哥拉斯公式”計算：

var normalizationFactor= Math.sqrt(2*2 + 5*5);

要進行規范化，您需要通過normalizationFactor來同時縮短velocityX和velocityY 。 之后，您可以選擇喜歡的號碼來選擇自己的速度。 （您現在使用0.001）

這是我試圖修補您的解決方案的嘗試，尚未測試，但是您應該了解一下：

velocityX = target.x - missile.shift.x;
velocityY = target.y - missile.shift.y;
var normalizationFactor= Math.sqrt(velocityX*velocityX + velocityY*velocityY);
var yourSpeed = 0.001;
missile.shift.x += yourSpeed * velocityX / normalizationFactor;
missile.shift.y += yourSpeed * velocityY / normalizationFactor;