3 files changed, 17 insertions, 14 deletions
diff --git a/boot.js b/boot.js
index f834d62..b9e8fe1 100644
--- a/boot.js
+++ b/boot.js
@@ -121,6 +121,13 @@ async function load() {
       setVolume(audio, vol) {
         audio.volume = vol;
       }
+    },
+    image: {
+      new(src) {
+        const img = new Image();
+        img.src = src;
+        return img;
+      }
     }
   });
   const scheme = await mod.reflect();
diff --git a/game.scm b/game.scm
index a4c646c..0e75684 100644
--- a/game.scm
+++ b/game.scm
@@ -111,6 +111,10 @@
     "audio" "setVolume"
     (ref extern) f64 -> none)
 
+  (define-foreign load-image
+    "image" "new"
+    (ref string) -> (ref extern))
+
   ;; TODO: Add basic fmod as inline wasm function
 
   ;; Hoot's exact and inexact aren't working right.  These next two
@@ -251,12 +255,12 @@
   ;; Elements
   (define canvas (get-element-by-id "canvas"))
   (define context (get-context canvas "2d"))
-  (define image:background (get-element-by-id "image-background"))
-  (define image:player (get-element-by-id "image-player"))
-  (define image:player-bullet (get-element-by-id "image-player-bullet"))
-  (define image:enemy-bullets (get-element-by-id "image-enemy-bullets"))
-  (define image:map (get-element-by-id "image-map"))
-  (define image:enemies (get-element-by-id "image-enemies"))
+  (define image:background (load-image "images/background.png"))
+  (define image:player (load-image "images/player.png"))
+  (define image:player-bullet (load-image "images/player-bullet.png"))
+  (define image:enemy-bullets (load-image "images/enemy-bullets.png"))
+  (define image:map (load-image "images/map.png"))
+  (define image:enemies (load-image "images/enemies.png"))
   (define sound:explosion (load-sound-effect "audio/explosion.wav"))
   (define sound:player-shoot (load-sound-effect "audio/player-shoot.wav"))
   (define sound:player-death (load-sound-effect "audio/player-death.wav"))
diff --git a/index.html b/index.html
index f0d59f1..de7e2d0 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,5 @@
   </head>
   <body>
     <canvas id="canvas"></canvas>
-    <div style="display:none;">
-      <img id="image-background" src="images/background.png" />
-      <img id="image-player" src="images/player.png" />
-      <img id="image-player-bullet" src="images/player-bullet.png" />
-      <img id="image-enemy-bullets" src="images/enemy-bullets.png" />
-      <img id="image-map" src="images/map.png" />
-      <img id="image-enemies" src="images/enemies.png" />
-    </div>
   </body>
 </html>