javascript - HTML/Javascript 升序数字

Question

我正在尝试制作一个简单的 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);

有人知道怎么做吗？

Answer 1

这是所有游戏的共同问题，您需要正确解决这个问题才能让您的游戏在您自己的计算机之外运行。

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

如果您的游戏是关于移动 spaceship 的，并且您希望它每秒移动 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>

---

顺便说一句，不正确的解决方案是您在许多旧游戏中发现的解决方案:尽可能快地增加内容。在旧计算机上，这是一个可行的解决方案；游戏重新绘制的速度足够慢，以至于游戏可以顺利进行。随着计算机变得越来越快，游戏将运行得更快，直到变得无法玩为止。