about summary refs log tree commit diff stats
path: root/js/canvas/game.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/canvas/game.js')
-rw-r--r--js/canvas/game.js16
1 files changed, 11 insertions, 5 deletions
diff --git a/js/canvas/game.js b/js/canvas/game.js
index 24f0296..2929f01 100644
--- a/js/canvas/game.js
+++ b/js/canvas/game.js
@@ -6,17 +6,22 @@ const ctx = canvas.getContext("2d");
 ctx.fillStyle = "#e0f8cf";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 
+
 // our noble avatar into playspace
 const player = {
   x: 50,
   y: 50,
-  width: 16,
-  height: 16,
-  step: 12,
+  width: 22,
+  height: 22,
+  step: 10,
   color: "#65ff00",
-  colorAlt: "pink"
+  colorAlt: "pink",
+  spriteUrl: "chickadee.svg"
 };
 
+const playerSprite = new Image();
+playerSprite.src = player.spriteUrl;
+
 // add keyboard input
 // FIXME: this input is blocking, allowing for only 1 key to be read at a time
 // this means that if you wanna do 2 things at 1 time you cannot.
@@ -77,7 +82,8 @@ function gameLoop() {
 
   // draw
   ctx.fillStyle = player.color;
-  ctx.fillRect(player.x, player.y, player.width, player.height);
+  ctx.fillRect(player.x, player.y, player.width, player.height);  
+  ctx.drawImage(playerSprite, player.x, player.y, player.width, player.height);
 
   // next frame
   requestAnimationFrame(gameLoop);