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

唯一的问题是我不能同时做到这两件事。而且我不能在所有角度使用相同的东西。

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

提前致谢＆lt; 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;