Javascript: 子弹动画跟随直接路径

Question

我正在开发 JS 游戏。在某些时候，角色的子弹需要移动并从任何角度击中目标。我在游戏循环中尝试过这样的事情：

if (bx < targetX-speed) bx += speed;
if (bx > targetX+speed) bx -= speed;
if (by < targetY-speed) by += speed;
if (by > targetY+speed) by -= speed;

显然它只能以 0 度和 45 度角行进，这看起来很糟糕。

我想通过计算子弹发射前的角度来发挥几何学的作用：

angle = Math.atan((by-targetY)/(bx-targetX));

知道角度我可以计算出 bx 或通过增加一个参数即：

by += speed;
bx = by*Math.tan(angle);

唯一的问题是我不能同时做这两件事。而且我不能对所有角度都使用相同的方法。

有没有人有更好的解决方案？

提前致谢<3 沃尔特

Answer 1

您已经找到了解决方案（尽管我个人会使用 sin 而不是 tan，因为 tan 是不连续的）。唯一的问题是你混淆了坐标系。

解决方法是：

angle = Math.atan((shooterY-targetY)/(shooterX-targetX));

仅在子弹发射时计算一次，然后将该角度存储在变量中。然后你可以这样做：

by += speed;
bx = by*Math.tan(angle);

我个人首选的解决方案是：

var dy = shooterY-targetY;
var dx = shooterX-targetX;
var distance = Math.sqrt(dy*dy+dx*dx);
var angle = Math.asin(dy/distance);

然后计算子弹的dy和dx：

var speed = SOME_SPEED;
var b_dy = Math.sin(angle) * speed;
var b_dx = Math.cos(angle) * speed;

然后移动被欺负的每一帧：

by += b_dy;
bx += b_dx;

Javascript: Bullet animation follow direct path