javascript - 弧线显示射击游戏中剩余的重新加载时间

Question

关于我在可汗学院用 Javascript 编写的游戏引擎的快速问题:我有一个代表剩余重新加载时间的弧线。 (在处理js时，绘制圆弧的工作原理如下:arc(x,y,width,height,start,stop);)

我已经将剩余时间(以秒为单位)的值存储在变量中，那么如何准确地得到弧楔 = 当前重新加载的时间除以总重新加载时间？

当圆弧为圆形时，重新加载完成。当弧线没有任何东西时，它就开始重新加载。

此外，重载弧形楔 block 行程从中心顶部开始，并绕外侧顺时针移动。

if(weapon.reloading){
    arc(300,300-player.size-player.size/2,40,40,-90,round((w.reloadCounter/w.reloadTime/100)*100)*6-95);

}

当 fps(每秒帧数等于 60)时，此冗余代码有效 我已经有一个名为 fps 的变量，它等于每秒帧数，因此如果提供任何帮助，请在示例中使用它。

谢谢!

编辑:这是否准确 - 从我从测试中看到的情况来看，它基本上是准确的:

    var time = round(w.reloadCounter/fps*10)/10;//seconds currently spent reloading(rounded to the nearest 10th)

    var t = round((w.reloadTime-time)*10)/10;//time left to finish reloading


    var timeLeftArc = map(t,0,w.reloadTime,270,-90);

    arc(300,300-player.size-player.size/2,40,40,-90,timeLeftArc);

Answer 1

我们知道 360 度构成一个完整的圆 - 这相当于您的武器完全重新装弹。为了获得中间值的正确弧度，我们需要计算出处理了重新加载阶段的百分比。

这可以简单地通过将耗时除以所需的总时间来完成 - 就像您已经做的那样:

w.reloadCounter / w.reloadTime

这将给出 0 到 1 之间的浮点值。如果我们将这个数字乘以 360，我们就得到了弧线的中间 Angular 。

arc(300, 300 - player.size - player.size / 2, 40, 40, -90, w.reloadCounter / w.reloadTime * 360 - 90);

举个简单的例子: 假设需要的时间是 1000ms，并且已经过去了 500ms:

500/1000 * 360 = 0.5 * 360 = 180