试图让一个画布跟随另一个画布，它变得疯狂

Question

好的。我有两张画布。第一个画布（rect1）将随机移动 在游戏板上。第二个（僵尸）应该跟随 rect1，但它只是到处跑。这是最重要的代码，我认为应该足以找出问题所在。

var rect1={
  x:300,
  y:150,
  width:8,
  velX:3,
  velY:3
};
var zombie={
  x: 100,
  y: 100,
  width: 10,
  velX: 3,
  velY: 3
};

if (zombie.x > rect1.x){
      zombie.velX *= -1;
    }
    if (zombie.y > rect1.y){
      zombie.velY *= -1;
    }
    if (zombie.x == rect1.x){
      zombie.velX *= 0;
    }
    if (zombie.y == rect1.y){
      zombie.velY *= 0;
    }

    zombie.x+= zombie.velX;
    zombie.y+= zombie.velY;

这是一个小提琴https://jsfiddle.net/Scrubben/easvqk6m/1/，您可以在其中看到僵尸（红色）的行为方式。很抱歉有两个矩形并且没有很好地在 jsfiddle 中发表评论，但你应该明白这一点。如果您想让我澄清或添加更多代码，请告诉我！谢谢

Answer 1

这些陈述：

if (zombie.x > rect1.x){
  zombie.velX *= -1;
}
if (zombie.y > rect1.y){
  zombie.velY *= -1;
}

不按预期工作。只有当僵尸位置小于矩形时，它们才会翻转速度。相反，如果速度方向错误，您希望翻转速度。

所以它应该是这样的：

if (Math.sign(rect1.x-zombie.x)!==Math.sign(zombie.velX)){
  zombie.velX *= -1;
}
if (Math.sign(rect1.y-zombie.y)!==Math.sign(zombie.velY)){
  zombie.velY *= -1;
}

更新小提琴：https://jsfiddle.net/easvqk6m/6/

Answer 2

问题是你总是在翻转速度。想象一下：

// Init
zombie.velX = 3;
zombie.x = 300;
rect1.velX = 3;
rect1.x = 100; // rect1 is to the left of zombie

// Frame 1
if (zombie.x > rect1.x) { // 300 > 100
  zombie.velX *= -1; // zombie.velX === -3
}
zombie.x += velX; // zombie.x === 297

// Frame 2
if (zombie.x > rect1.x) { // 297 > 100
  zombie.velX *= -1; // zombie.velX === +3
}
zombie.x += velX; // zombie.x === 300

而且这种循环会永远重复。相反，您可以使用它的速度的绝对值来指定前进的方向。

if (zombie.x > rect1.x) { // We want to move zombie to the left
  zombie.velX = -Math.abs(zombie.velX);
} else { // We want to move zombie to the right
  zombie.velX = Math.abs(zombie.velX);
}