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;