Javascript:子弹动画遵循直接路径

时间:2015-12-20 11:12:54

标签: javascript animation geometry game-physics

我正在开发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 沃尔特

1 个答案:

答案 0 :(得分: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;