HTML/Javascript升序数

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

例如，如果我在

5

pps吃煎饼，现在它只会变成

0、5、10、

等等。。。每一秒。我想让它运行

0,1,2,3,4,5（1秒）

，下一秒

6,7,8,9,10，

等等

这是我到目前为止为煎饼柜台准备的代码：

pps = 100;
tp = 0;

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

---

有人知道怎么做吗？

一个简单的间隔计时器就可以了。大概是这样的：

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);
}

---

这是所有游戏都会遇到的问题，您需要正确解决这个问题，才能让游戏在自己的计算机之外正常运行

正确的解决方案是，您需要测量游戏循环的每次迭代之间或每次帧渲染之间的弹性时间。实际上，这将是一个非常小的数字；你可以把这个数字看作是一个“比例因子”

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

• 查找自上次间隔以来经过的时间（以秒为单位）。在游戏速率限制为每秒60帧的情况下，这大约是每秒的1/60
• 将船速（每秒5个单位）乘以1/60；船会移动0.8333。。。单位这个刻度
• 把船移那么远

到1整秒过去时，飞船将移动5个单位。 完全相同的原则适用于您的PPS

重要的一点是，在现实世界中，帧与帧之间的间隔将而不是正好是1/60秒。如果你没有在循环的每次迭代中计算“比例因子”，你的游戏将慢慢产生错误

setInterval

对这一点尤其不利，根本不适合作为游戏中的时间来源

JavaScript中的实现很简单：每个游戏循环都记录当前时间，无论时间来源如何；在本例中，您可以使用

get Date（）.getTime（）

，它返回自事件发生以来的时间（以毫秒为单位）。记录此值

在随后的重画中，您将再次调用

get Date（）.getTime（）

，然后将前面的值减去经过的时间。这是您的比例因子，以毫秒为单位。您可以将

pps

乘以该值来确定要添加多少煎饼

即使您使用的是

setInterval

，仍然要遵循这种方法，这一点很重要。您可能认为您可以简单地

setInterval（…，1000/60）

每秒调用回调60次，但是

setInterval

（和

setTimeout

）并不准确-它们调用回调的至少在未来很长一段时间内，但可能要远得多。您仍然需要根据上次重画后经过的时间来缩放pps

下面是一个简单的实现：

var-PPS=5；
var lastTime=new Date（）.getTime（）；
var=0；
setInterval（函数（）{
var currentTime=new Date（）.getTime（）
var elapsedTime=当前时间-上次时间；
lastTime=当前时间；
cakes+=（PPS*（elapsedTime/1000））//elapsedTime以毫秒为单位，除以1000得到分数秒
document.getElementById（'pps'）。innerText=cakes；
}, 10);
请显示相关代码。但是如果我被迫猜测，我会说您正在做类似于
setTimeout（function（）{pancakes+=pps；}，1000）
？执行
setTimeout（function（）{pancakes++；}，1000/pps）
。是的，通过编写一些代码…；-）好的，我不确定我是否完全理解这一点，对不起，我对这一点比较陌生。如果我有这样的东西：
pps=100；tp=0；setInterval（function（）{tp+=parseInt（pps）；document.getElementById（“test”）.innerHTML=tp；}，1000）其中tp是总煎饼数，pps是每秒煎饼数，我如何更改此代码以使其与您刚刚发布的代码相同？好的，关于我的版本，需要注意的一点是，一旦达到顶部，它将停止增加。我将用一个永远递增的版本编辑答案。您肯定不想在循环/计时器中调用
document.getElementById
。调用它一次，将元素存储在某个位置，以后再引用。@user3385777请不要使用此方法，您不能依靠
setInterval
定期调用它的回调。如果您的浏览器因任何原因暂停，计算将被抛出，并且无法恢复。这是一个巨大的问题，很多事情都会导致
setInterval
以比实际请求慢得多的速度调用其回调。我的方法不受此问题的影响，是业界公认的解决此问题的方法。@meagar关于
setInterval
调用计时的不可靠性是正确的。它不会在指定的时间立即开火。相反，如果您有任何长时间运行的函数，它会对可能长时间不会触发的事件进行排队。我仍然建议预加载span元素，而不是每次在循环中抓住它，但总体上他的解决方案更安全。除非显示中的分数值是可接受的，否则innerText应该设置为
Math.floor（cakes）
。