javascript - 制作一个虚构的游戏时间/时钟

Question

我正在尝试制作一个游戏时钟，其中每个游戏小时都是 3 个实时分钟。但是由于某种原因，我很难将头环绕在它周围。
我想出了这个半工作位，每小时循环 3 分钟，所以它只显示完整的“游戏时间”，我在 23 以上重置一次以开始新的一天。
我想我必须将循环更新为游戏时钟的准确性？

var hours;

if (process.argv.length > 2) {
  // setting the clock
  hours = parseInt(process.argv.slice(2));
}

console.log(hours);

let timerId = setInterval(function() {
  hours = hours + 1
  if (hours > 23) {
    hours = 0;
  }
  console.log(hours);
}, 3 * 60 * 1000);

Answer 1

是的，在游戏秒级别，您必须有更快的重复间隔。如果一个游戏小时是 3 真实分钟，那么游戏时间实际上是真实时间的 20 倍，因此一游戏秒将持续 1/20 真实秒，即 50 毫秒。

const speed = 20; // how many times faster than real time
let clockDiv = document.querySelector("#clock");
let gameStartTime = 0; // game-milliseconds;
let realStartTime = Date.now(); // real milliseconds

let timerId = setInterval(function() {
  let gameTime = gameStartTime + (Date.now() - realStartTime) * speed;
  let sec = Math.floor(gameTime / 1000) % 60;
  let min = Math.floor(gameTime / 60000) % 60;
  let hour = Math.floor(gameTime / 3600000) % 24;
  // output in hh:mm:ss format:
  clockDiv.textContent = `${hour}:${min}:${sec}`.replace(/\b\d\b/g, "0$&");
}, 50);

<div id="clock"></div>