Question

我正在尝试制作一个简单的JavaScript游戏。基本上，你每秒可以获得一定量的煎饼。在代码中，我将此值（您获得煎饼的速率）称为pps。我想这样做，因为显示煎饼总量的HTML span标签会获得更多的煎饼（以pps 的速度），它会上升，所以看起来更好。

例如，如果我以5 pps获得煎饼，那么它现在只需0, 5, 10,等......每一秒。我想要它0,1,2,3,4,5(1 second)，下一秒6,7,8,9,10,等......

以下是我目前为煎饼柜台提供的代码：

pps = 100;
tp = 0;

window.setInterval(function(){
  tp += parseInt(pps);
  document.getElementById("test").innerHTML = tp;
}, 1000);

任何人都知道怎么做？

Answer 1

这是所有游戏中常见的问题，您需要正确解决该游戏才能在自己的计算机外工作。

正确的解决方案是您需要测量游戏循环的每次迭代之间或每个帧渲染之间的缩短时间。实际上，这只是一个非常小的数字;您可以将此数字视为“缩放因子”。

如果您的游戏是关于移动太空飞船，并且您希望它每秒移动5个屏幕单位，那么您的游戏循环将会：

查找自上次间隔以来经过的时间（以秒为单位）。在游戏速率限制为每秒60帧，这将是大约1/60秒
将船速（每秒5个单位）乘以1/60;该船将移动0.8333 ...单位此刻度
按此数量移动船只。

到1秒钟后，该船将移动5个单位。完全相同的原则适用于您的PPS。

重要的是，在现实世界中，不恰好是帧之间的1/60秒。如果你没有计算循环的每次迭代的“缩放因子”，你的游戏将慢慢产生错误。 setInterval对于此特别不利，并且根本不适合作为游戏时间的来源。

JavaScript中的实现很简单：每个游戏循环，记录您可用的任何时间源的当前时间;在您的情况下，您可以使用get Date().getTime()，它返回自UNIX epoch以来的时间（以毫秒为单位）。记录此值。

在随后的重绘中，您将再次调用get Date().getTime()，然后将之前的值减去经过的时间。这是您的缩放系数，以毫秒为单位。您可以将pps乘以该值，以确定要添加的煎饼数量。

即使您使用setInterval，仍然必须遵循此方法。你可能认为你可以setInterval(..., 1000 / 60)每秒调用你的回调60次，但setInterval（和setTimeout）不准确 - 他们会调用你的回调至少未来那么远，但可能更进一步。您仍需要按自上次重绘后经过的时间缩放pps。

这是一个简单的实现：

var PPS = 5;
var lastTime = new Date().getTime();
var cakes = 0;

setInterval(function () {
  var currentTime = new Date().getTime()
  var elapsedTime = currentTime - lastTime;

  lastTime = currentTime;
  
  cakes += (PPS * (elapsedTime / 1000)) // elapsedTime is in milliseconds, divide by 1000 to get fractional seconds
  
  document.getElementById('pps').innerText = cakes;
  
  
}, 10);

<div id="pps"></div>

另外，不正确的解决方案是您在许多旧游戏中找到的解决方案：尽可能快地增加内容。在旧电脑上，这是一个可行的解决方案;游戏慢慢地重新开始，游戏将顺利进行。随着计算机变得更快，游戏将运行更快，直到它变得无法播放。

Answer 2

一个简单的间隔计时器可以解决问题。像这样：

function incrementToNumber(tag, currentNumber, targetNumber) {
    var numTicks = targetNumber - currentNumber;
    var interval = setInterval(function() {
        currentNumber++;
        tag.innerText = currentNumber;
        if(currentNumber == targetNumber) {
            clearInterval(interval);
        }
    }, 1000 / numTicks);
}

该特定功能在一秒钟内递增。要更改增量所需的时间，请将1000替换为您想要的毫秒数。

对于永远增加的版本：

function inrementForever(tag, currentPancakes, pancakesPerSecond) {
    setInterval(function() {
        currentPancakes++;
        tag.innerText = currentPancakes;
    }, 1000 / pancakesPerSecond);
}

HTML / Javascript Ascending Number

2 个答案: