如何在 javascript 中计算射弹的弧度？

Question

我正在为课程作业创建一个游戏，两个坦克放在一个 canvas 上，带有炮塔初始速度和角度的输入框，然后是一个发射炮弹的按钮（目前是 div 元素在一个圆的形状），它调用一个函数，在这种情况下它是 fire1。我搞砸了几天，似乎无法让它工作，"bullet" 是我的 div 元素。

function fire1 () {
    var canvas = document.getElementById("canvas")
    var bullet = document.getElementById("bullet");
    bullet.style.visibility = "visible"

    var start = null;
    var intialVelocity = velocity1.value
    var angle = angle1.value
    var g = 9.81;
    var progress, x, y;

function step(timestamp) {
    if(start === null) start = timestamp;
    progress = (timestamp - start)/1000;

    x = (turret1.x + 80) + (intialVelocity*progress)
    y = (turret1.y - 400) + (intialVelocity*progress)*Math.sin(angle*toRadians) - (0.5*g*(progress^2));//)

    bullet.style.left = x + "px";
    bullet.style.bottom = y + "px";

    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

下面是我的 css 部分内容。

#bullet {
position: absolute;
left: 0;
bottom: 50%;
width: 1em;
height: 1em;
border-radius: 0.5em;
background: red; 
visibility: hidden;
}

我是 javascript、css 和 html 的新手，所以非常感谢帮助，我正在尝试合并 trajectory formula 这行得通吗？我还希望它具有动画效果，以便在发射时遵循一条路径。谢谢

Answer 1

我很久以前就解决了这个问题，但忘记更新解决方案，下面是如何计算轨迹的 x 和 y：

x = ((turret.anchorX + negative*(initialVelocity*progress*Math.cos(angle*toRadians)))); //x-coordinate for bullet calculated by using x=ut.

y = ((720 - turret.anchorY + (initialVelocity*progress*Math.sin(angle*toRadians)) + (0.5*g*(Math.pow(progress,2))))); //y-coordinate for bullet calculated by usnig ut+0.5at^2.

如何在 javascript 中计算射弹的弧度？

How do I calculate the arc of a projectile in javascript?

html

javascript

css

jquery-animate