不精确地移动一个角度

Question

当我沿着一个角度移动一个物体时，它并没有精确地沿着这个角度移动。我的鼠标不会出现在屏幕截图中，所以我的鼠标大约在绿点上。

我正在使用p5.js库。

这是重要的代码：

this.pos.x += cos(this.r) * this.speed;
this.pos.y += sin(this.r) * this.speed;
this.r = Math.atan2(mouseY - getPos(player.x, player.y).y, mouseX - getPos(player.x, player.y).x);

这是getPos函数：

function getPos(x, y) {
  return createVector(x / 256 * width, y / 256 * height);
}

Answer 1

如果要沿鼠标方向移动对象，请不要检查不安全的角度，只需将差异向量标准化

dx = mouseX - this.pos.x;
dy = mouseY - this.pos.y;
ds = Math.hypot(dx,dy);
this.pos.x += dx/ds * this.speed;
this.pos.y += dy/ds * this.speed;

您可能想要考虑使用哪种几何体，屏幕几何体或模型的几何体。由于缩放不是各向同性的，width和height可能不同，因此这些几何中的角度会有所不同。此外，您不应计算屏幕和模型变量的差异，似乎player对象的坐标是模型几何，而mouseX, mouseY是屏幕几何。在我看来，您在屏幕几何中计算更新，但将其添加到模型几何坐标。

最好在模型几何体中进行所有计算，并在绘制场景时转换为屏幕几何体，并在鼠标事件处理程序中进行交谈。

Answer 2

为什么使用x，y值乘以宽度，高度？

鼠标或播放器是否在某些异域坐标中工作？

顺便说一句，你可以用

摆脱三角函数

dx = mouseX - player.x
dy = mouseY - player.y
len = sqrt(dx*dx + dy*dy)
dx = dx / len
dy = dy / len
pos.x +=  dx * his.speed