arc 显示射击游戏中剩余的重新加载时间

Question

关于我在可汗学院用 Javascript 编写的游戏引擎的快速问题：我在弧上表示剩余的重新加载时间。 （在处理 js 时，绘制圆弧的工作方式如下： arc(x,y,width,height,start,stop); ）

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

当圆弧为圆时，重新加载完成。 当弧线什么都没有时，它才开始重新加载。

此外，重新加载弧楔笔划从中心顶部开始，并围绕外侧顺时针移动。

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，我们就得到了弧的中间角度。

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

举一个简单的例子：假设所需的时间是 1000 毫秒，并且已经过去了 500 毫秒：

500 / 1000 * 360 = 0.5 * 360 = 180