计算弹丸的弹道弧度

Question

我正在尝试以弧形在屏幕上移动图像...想想 flappy birds 发射器。图像从屏幕的左下方开始。当 'launched' 我希望它在屏幕上以弧形移动/动画，就像启动时一样。

我可以在线性（向上和向右）轨迹中为图像设置动画，但无法弄清楚如何让它弯曲并开始下降。

图像位于屏幕的左下方。

在每 0.01 秒运行一次的 setTimeout 方法中，我有：

left += 10;
top -= 10;
$image.animate({left: '' + left + 'px', top: '' + top + 'px' });

Answer 1

跟踪速度和位置。

const GRAVITY = 2; // acceleration due to gravity, in pixels/tick
x = 0;
y = 0;
deltaX = 10;
deltaY = -10;

function tick() { // your setTimeout method
  x += deltaX;
  y += deltaY;
  deltaY += GRAVITY;
  $image.animate({left: `${x}px`, top: `${y}px` });
}

计算弹丸的弹道弧度

Calculating the trajectory arc of a projectile

javascript

css

jquery

physics

jquery-animate