Game loop

src/game.js

@@ -2,6 +2,24 @@ export default class Game {
   constructor(canvas) {
     this.canvas = canvas
     this.ctx = canvas.getContext("2d")
+    this.timestamp = 0
+  }
+
+  start() {
+    requestAnimationFrame(this.loop.bind(this))
+  }
+
+  loop(timestamp) {
+    const dt = timestamp - this.timestamp
+    this.timestamp = timestamp
+    this.tick(dt)
+    this.draw()
+
+    requestAnimationFrame(this.loop.bind(this))
+  }
+
+  tick(dt) {
+    console.log(dt)
   }
 
   draw() {

src/index.js

@@ -4,5 +4,6 @@ document.addEventListener("DOMContentLoaded", e => {
   console.log("Hello, world!")
   const canvas = document.getElementById("game-canvas")
   const game = new Game(canvas)
-  game.draw()
+
+  game.start()
 })