diff options
author | elioat <elioat@tilde.institute> | 2023-10-30 17:10:18 -0400 |
---|---|---|
committer | elioat <elioat@tilde.institute> | 2023-10-30 17:10:18 -0400 |
commit | 569669da195d572f6a03e4e200fee25bb64f8369 (patch) | |
tree | 53bc4642e5a9c5ca0b911a7d2187b9f9efca7853 /js/canvas | |
parent | a0c4292dc2ea9ee11ab3aceda4aa5ced31ba8dcf (diff) | |
download | tour-569669da195d572f6a03e4e200fee25bb64f8369.tar.gz |
*
Diffstat (limited to 'js/canvas')
-rw-r--r-- | js/canvas/chickadee.png | bin | 0 -> 189 bytes | |||
-rw-r--r-- | js/canvas/chickadee.svg | 259 | ||||
-rw-r--r-- | js/canvas/game.js | 16 |
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); |