top-down-action-adventure/src/game.js

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() {
    const { canvas, ctx } = this
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath()
    ctx.fillColor = "#FF0000"
    ctx.rect(200, 100, 80, 50)
    ctx.fill()
    ctx.closePath()
  }
}