javascript - Javascript:项目符号动画遵循直接路径

我正在开发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);

唯一的问题是我不能同时做这两项。而且我将无法对所有角度使用相同的角度。

有谁有更好的解决方案？

在此先感谢沃尔特

最佳答案

您已经找到了解决方案（尽管我个人会用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;

然后将每个框架移动到Bulled：

by += b_dy;
bx += b_dx;

关于javascript - Javascript:项目符号动画遵循直接路径，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34380369/