*

3 files changed, 270 insertions, 5 deletions

diff --git a/js/canvas/chickadee.png b/js/canvas/chickadee.png
new file mode 100644
index 0000000..2a0c5ce
--- /dev/null
+++ b/js/canvas/chickadee.png
Binary files differdiff --git a/js/canvas/chickadee.svg b/js/canvas/chickadee.svg
new file mode 100644
index 0000000..faf7be4
--- /dev/null
+++ b/js/canvas/chickadee.svg
@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg version="1.1" width="160" height="160" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+<rect x="0" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="20" width="10" height="10" fill="#306850" />
+<rect x="30" y="20" width="10" height="10" fill="#306850" />
+<rect x="40" y="20" width="10" height="10" fill="#306850" />
+<rect x="50" y="20" width="10" height="10" fill="#306850" />
+<rect x="60" y="20" width="10" height="10" fill="#306850" />
+<rect x="70" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="30" width="10" height="10" fill="#306850" />
+<rect x="20" y="30" width="10" height="10" fill="#306850" />
+<rect x="30" y="30" width="10" height="10" fill="#306850" />
+<rect x="40" y="30" width="10" height="10" fill="#306850" />
+<rect x="50" y="30" width="10" height="10" fill="#306850" />
+<rect x="60" y="30" width="10" height="10" fill="#306850" />
+<rect x="70" y="30" width="10" height="10" fill="#306850" />
+<rect x="80" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="40" width="10" height="10" fill="#306850" />
+<rect x="20" y="40" width="10" height="10" fill="#306850" />
+<rect x="30" y="40" width="10" height="10" fill="#306850" />
+<rect x="40" y="40" width="10" height="10" fill="#306850" />
+<rect x="50" y="40" width="10" height="10" fill="#306850" />
+<rect x="60" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="40" width="10" height="10" fill="#306850" />
+<rect x="80" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="50" width="10" height="10" fill="#306850" />
+<rect x="10" y="50" width="10" height="10" fill="#86C06C" />
+<rect x="20" y="50" width="10" height="10" fill="#86C06C" />
+<rect x="30" y="50" width="10" height="10" fill="#306850" />
+<rect x="40" y="50" width="10" height="10" fill="#306850" />
+<rect x="50" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="50" width="10" height="10" fill="#306850" />
+<rect x="80" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="60" width="10" height="10" fill="#86C06C" />
+<rect x="10" y="60" width="10" height="10" fill="#306850" />
+<rect x="20" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="60" width="10" height="10" fill="#306850" />
+<rect x="80" y="60" width="10" height="10" fill="#306850" />
+<rect x="90" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="70" width="10" height="10" fill="#306850" />
+<rect x="10" y="70" width="10" height="10" fill="#306850" />
+<rect x="20" y="70" width="10" height="10" fill="#306850" />
+<rect x="30" y="70" width="10" height="10" fill="#306850" />
+<rect x="40" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="70" width="10" height="10" fill="#306850" />
+<rect x="100" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="80" width="10" height="10" fill="#306850" />
+<rect x="10" y="80" width="10" height="10" fill="#306850" />
+<rect x="20" y="80" width="10" height="10" fill="#306850" />
+<rect x="30" y="80" width="10" height="10" fill="#306850" />
+<rect x="40" y="80" width="10" height="10" fill="#306850" />
+<rect x="50" y="80" width="10" height="10" fill="#86C06C" />
+<rect x="60" y="80" width="10" height="10" fill="#86C06C" />
+<rect x="70" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="80" width="10" height="10" fill="#306850" />
+<rect x="110" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="90" width="10" height="10" fill="#306850" />
+<rect x="10" y="90" width="10" height="10" fill="#306850" />
+<rect x="20" y="90" width="10" height="10" fill="#306850" />
+<rect x="30" y="90" width="10" height="10" fill="#306850" />
+<rect x="40" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="60" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="70" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="80" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="90" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="100" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="90" width="10" height="10" fill="#306850" />
+<rect x="120" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="100" width="10" height="10" fill="#306850" />
+<rect x="10" y="100" width="10" height="10" fill="#306850" />
+<rect x="20" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="100" width="10" height="10" fill="#86C06C" />
+<rect x="70" y="100" width="10" height="10" fill="#86C06C" />
+<rect x="80" y="100" width="10" height="10" fill="#86C06C" />
+<rect x="90" y="100" width="10" height="10" fill="#306850" />
+<rect x="100" y="100" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="100" width="10" height="10" fill="#306850" />
+<rect x="120" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="110" width="10" height="10" fill="#306850" />
+<rect x="10" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="110" width="10" height="10" fill="#306850" />
+<rect x="80" y="110" width="10" height="10" fill="#306850" />
+<rect x="90" y="110" width="10" height="10" fill="#306850" />
+<rect x="100" y="110" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="110" width="10" height="10" fill="#86C06C" />
+<rect x="120" y="110" width="10" height="10" fill="#306850" />
+<rect x="130" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="120" width="10" height="10" fill="#306850" />
+<rect x="20" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="30" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="40" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="50" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="120" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="130" y="120" width="10" height="10" fill="#306850" />
+<rect x="140" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="130" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="130" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="130" width="10" height="10" fill="#306850" />
+<rect x="30" y="130" width="10" height="10" fill="#306850" />
+<rect x="40" y="130" width="10" height="10" fill="#306850" />
+<rect x="50" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="60" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="70" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="80" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="90" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="100" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="130" width="10" height="10" fill="#306850" />
+<rect x="120" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="130" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="140" y="130" width="10" height="10" fill="#306850" />
+<rect x="150" y="130" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="140" width="10" height="10" fill="#306850" />
+<rect x="50" y="140" width="10" height="10" fill="#306850" />
+<rect x="60" y="140" width="10" height="10" fill="#306850" />
+<rect x="70" y="140" width="10" height="10" fill="#306850" />
+<rect x="80" y="140" width="10" height="10" fill="#306850" />
+<rect x="90" y="140" width="10" height="10" fill="#86C06C" />
+<rect x="100" y="140" width="10" height="10" fill="#306850" />
+<rect x="110" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="140" width="10" height="10" fill="#306850" />
+<rect x="130" y="140" width="10" height="10" fill="#306850" />
+<rect x="140" y="140" width="10" height="10" fill="#86C06C" />
+<rect x="150" y="140" width="10" height="10" fill="#306850" />
+<rect x="0" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="150" width="10" height="10" fill="#306850" />
+<rect x="50" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="150" width="10" height="10" fill="#306850" />
+<rect x="70" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="150" width="10" height="10" fill="#306850" />
+<rect x="100" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="150" width="10" height="10" fill="#306850" />
+<rect x="150" y="150" width="10" height="10" fill="#E0F8CF" />
+</svg>
\ No newline at end of file
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);