在两点之间的线上获取点

我正在用JavaScript制作一个简单的太空游戏，但现在我遇到了有关向量的难题。

游戏视图在2d网格上自上而下。当用户单击网格时，太空飞船将飞到该地点。

因此，如果我有两点要点：

{ x : 100.2, y : 100.6 }; // the ship
{ x : 20.5,  y : 55.95 }; // the clicked coordinates

如果游戏循环以每秒60次迭代的速度滴答作响，并且期望的飞船速度为每滴答0.05点（每秒3点），那么我如何为游戏循环的每个滴答计算新的飞船坐标集？

ps：我不想考虑惯性或影响船的多个向量，我只想让船停下它正在做的任何事情（即以一种方式飞行）并以静态速度移动到单击的坐标。

在伪代码中：

speed_per_tick = 0.05
delta_x = x_goal - x_current
delta_y = y_goal - y_current
goal_dist = sqrt( (delta_x * delta_x) + (delta_y * delta_y) )
if (dist > speed_per_tick)
{
    ratio = speed_per_tick / goal_dist
    x_move = ratio * delta_x  
    y_move = ratio * delta_y
    new_x_pos = x_move + x_current  
    new_y_pos = y_move + y_current
}
else
{
    new_x_pos = x_goal 
    new_y_pos = y_goal
}

LERP-线性插值

几天前，我针对类似问题给出了此答案，但现在我们开始：

线性插值是一项根据进度为您提供两个数字之间的数字的功能。您实际上可以在两点之间得到一个点。

伟大的公式-如何计算

一般的LERP公式由给出pu = p0 + (p1 - p0) * u。哪里：

• pu：结果数
• p0：初始编号
• p1：最终数字
• u：进度。它以0到1之间的百分比表示。

如何获得百分比

您可能想知道，“我怎么能得到这个百分比！？”。不用担心 就像这样：起始矢量完成需要花费多少时间？好的，将其除以已经过去的时间。这将给您百分比。

看，像这样： percentage = currentTime / finalTime;

计算向量

要获得结果矢量，您需要做的是两次应用公式，一次用于X分量，一次用于Y分量。像这样：

point.x = start.x + (final.x - start.x) * progress;
point.y = start.y + (final.y - start.y) * progress;

计算变量时间

您可能希望点数以0.5点的速度行驶，是吗？因此，假设更长的距离将经过更长的时间。

您可以按照以下步骤进行操作：

• 获取距离长度为此，您需要做两件事。获取距离向量，然后将其转换为长度值。

  distancevec = final - start;
distance = distancevec.length();

我希望你知道向量数学。否则，您可以通过此公式计算向量长度d = sqrt(pow(v.x, 2) + pow(v.y, 2));。

• 获取所需的时间并更新最终时间。这很容易。当您希望每个刻度线有0.5个长度时，我们只需除以并得到多少个刻度线即可。

  finalTime = distance / 0.5f;

做完了

注意：也许这不是您想要的速度，但这是正确的。这样您就可以进行线性运动，即使是对角运动。如果您想做x + = 0.5f，y + = 0.5f，请阅读向量数学书并重新检查您的计划。

这可以通过计算方向的法线，然后通过参数方程式计算当前位置来完成

newPoint = startPoint + directionVector * velocity * t

其中t是自船开始向所需方向行驶以来经过的时间。您还可以通过以下方式对每个更新执行此操作

newPoint = currentPoint + directionVector * velocity * timeDelta

您只需要在每个帧/物理/等位置进行计算即可。更新，直到船到达目的地为止。