如何确定动画精灵何时到达某个点？答案

【问题标题】：How to determine when an animated sprite reaches a point?如何确定动画精灵何时到达某个点？
【发布时间】：2012-06-29 21:33:03
【问题描述】：

我有一个 Javascript 中的 2D 动画，我需要一个精灵以设定的速度和方向从一个点 (x1, y1) 移动到另一个点 (x2, y2)。例如，

function update(speedX, speedY){
    x1 += speedX;
    y1 += speedY;
    if("(x1, y1) reach (x2, y2)"){
        // do other stuff
    }
}

在大多数情况下，speedX 和 speedY 不相等，它们也不会均匀地影响每个轴所需的行进距离。我使用切线函数计算 speedX 和 speedY 值，以计算给定速度和角度所需的速度。

我的问题是，有没有一种算法可以做到这一点？我更喜欢高效的东西，因为这必须每秒完成 30 次，而且它是浮点加法！谢谢！

【问题讨论】：

您的坐标 x1,y1,x2,y2 与浏览器窗口有关吗？
@Napolux 不，它们只是画布对象内的点。基本上整个动画都是自己的系统（就是为了一个游戏），所以我在找直接手动的解决方案。
好的，谢谢！我将尝试在下面回答:)

标签： javascript algorithm function math

【解决方案1】：

通常（我过去开发了一些游戏，没什么特别的）我曾经将我的精灵视为矩形，然后我使用一个非常简单的公式检查两个精灵的重叠（看在this very good explanation)。

假设您必须检查点和矩形之间的碰撞。您可以应用相同的简化公式来检查该点是否位于矩形区域之间。在这种情况下，read here。

【讨论】：

【解决方案2】：

解决方案：

好的，通过一些工作我想通了。首先，我定义了一个函数

function getSign(val) { ... }

根据传入的数字分别是负数、0 还是正数，简单地返回 -1、0 或 1。然后，我在开始时做了以下事情（在任何更新发生之前）：

var xSign = getSign(x1-x2);
var ySign = getSign(y1-y2);

最后，要检查该点当前是否位于或刚刚超过目标 (x2, y2)，只需检查以下代码：

function update(speedX, speedY){
    x1 += speedX;
    x2 += speedY;
    var curXsign = getSign(x1-x2);
    var curYsign = getSign(y1-y2);
    if( curXsign != xSign || curYsign != ySign ||
        (curXsign == 0 && curYsign == 0)){
            // do other stuff
    }
}

基本上，如果 X 或 Y 之间的相对矢量距离的任何一个符号改变符号，则意味着该轴经过了该点。如果 curXsign 和 curYsign 都为 0，这意味着它就在目标点上。这三种情况中的任何一种都意味着您正在或刚刚超过目标点。经过测试并且可以工作。

另一种可能的解决方案是测试起点和当前位置之间的距离（curDist），并将其与起点和目标点之间的距离（dist）进行比较。一旦 curDist >= dist，你就知道你已经到达或超过了目标点。

【讨论】：

【解决方案3】：

它位于 VIC-II 的 $1F 端口中：

PRINT PEEK(53279)

:-)

【讨论】：