add catching up mechanic for ticks

src/game.js

@@ -18,6 +18,7 @@ export default class Game {
   tickRate = 30
   width = 10000 * 1.6
 
+  #behindMs = 0
   #currentTiming = 0
   #eventEmitter = new EventEmitter()
   #logic = null
@@ -103,9 +104,8 @@ export default class Game {
   }
 
   #gameLoop() {
-    const tickBudget = this.#tickBudget
-
     if (this.#nextTickAt != null) {
+      const tickBudget = this.#tickBudget
       const nextTickAt = this.#nextTickAt
       this.#nextTickAt = null
 
@@ -114,9 +114,11 @@ export default class Game {
 
       const before = performance.now()
       this.update()
-      this.#nextTickAt = start + tickBudget
       const after = performance.now()
       const taken = (after - before)
+      const prevBehind = this.#behindMs
+      this.#behindMs = Math.max(0, this.#behindMs + taken - tickBudget)
+      this.#nextTickAt = start + tickBudget - prevBehind
 
       this.#timings[this.#currentTiming] = taken
       if (this.#currentTiming++ > this.#timings.length) {
@@ -124,7 +126,7 @@ export default class Game {
       }
 
       if (after - before > tickBudget) {
-        console.warn(`Can't keep up! A tick took ${taken.toFixed(1)} ms. Entity count: ${this.entities.length}`)
+        console.warn(`Can't keep up! A tick took ${taken.toFixed(1)} ms / ${tickBudget} ms. (Behind ${this.#behindMs} ms)`)
       }
     }
   }