不精确地移动一个角度

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

不精确地移动一个角度

Imprecise moving on an angle

javascript

math

p5.js