Making a fictional game time / clock

Viewed 240

I'm trying to make a game clock where each game hour are 3 real-time minutes. But I have a hard time wrapping my head around it for some reason. I've came up with this half working bit, with a loop of 3 minutes for each hour so it's only showing full 'game hours' which I reset once above 23 to start a fresh day. I guess I would have to update the loop to the accuracy of the game time clock?

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

2 Answers

I'm entirely sure where your problem is, but @ 3 mins real time = 1 hour game time, 1 real second = 20 game seconds. 3600 / 180 = 20. You should be able to feed the game seconds into any normal time function to get minutes/hours etc.

Yes, you would have to have a much faster repeating interval, at the level of game-seconds. If one game-hour is 3 real minutes, then game time actually runs 20 times as fast as real time, and so one game-second would last 1/20 real seconds, i.e. 50 milliseconds.

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>

Related