diff options
Diffstat (limited to 'js/canvas/game.js')
-rw-r--r-- | js/canvas/game.js | 16 |
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); |