试图让一块画布跟随另一块画布，这太疯狂了

Trying to get a canvas to follow another canvas, it goes crazy

本文关键字：一块 疯狂 跟随 布跟随      更新时间：2023-09-26

好的。我有两幅油画。第一个画布（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中进行评论，但你应该明白这个想法。如果你想让我澄清或添加更多代码，请让我知道！感谢

这些语句：

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;
}

更新的fiddle：https://jsfiddle.net/easvqk6m/6/

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

// 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);
}
相关文章：