Load and use a single asset

src/assets.js

@@ -0,0 +1,22 @@
+export default class Assets {
+  constructor() {
+    this.assetMap = {}
+  }
+
+  get(assetName) {
+    return this.assetMap[assetName]
+  }
+
+  async load() {
+    const tilesheet = new Image()
+    this.assetMap.tilesheet = tilesheet
+    tilesheet.src = "./assets/RPGpack_sheet.png"
+
+    return new Promise((resolve, reject) => {
+      tilesheet.addEventListener("load", e => {
+	console.log(e)
+	resolve()
+      })
+    })
+  }
+}

src/game.js

@@ -31,8 +31,7 @@ export default class Game {
 
   draw() {
     const { canvas, ctx } = this
-    ctx.fillStyle = "#222"
-    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    ctx.drawImage(this.assets.get("tilesheet"), 0, 0)
     this.actors.forEach(actor => actor.draw(ctx))
   }
 }

src/index.js

@@ -1,8 +1,12 @@
 import Game from "./game.js"
+import Assets from "./assets.js"
 
-document.addEventListener("DOMContentLoaded", e => {
+document.addEventListener("DOMContentLoaded", async e => {
   const canvas = document.getElementById("game-canvas")
   const game = new Game(canvas)
 
+  game.assets = new Assets()
+  await game.assets.load()
+
   game.start()
 })

src/room.js

@@ -0,0 +1,5 @@
+import Actor from "./actor.js"
+
+export default class Room extends Actor {
+  
+}