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分开的差异） ＆＃34; normalizationFactor＆＃34;由＆＃34;毕达哥拉斯公式计算＆＃34;：

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

要进行规范化，您需要将velocityX和velocityY缩短normalizationFactor。 之后，您可以选择要选择速度的号码。 （你现在使用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;