diff options
-rw-r--r-- | js/canvas/game.js | 18 |
1 files changed, 6 insertions, 12 deletions
diff --git a/js/canvas/game.js b/js/canvas/game.js index e8ef51f..24f0296 100644 --- a/js/canvas/game.js +++ b/js/canvas/game.js @@ -1,18 +1,12 @@ -// get the canvas element +// configure the canvas -- our playspace...magic circle and what not const canvas = document.getElementById("gameCanvas"); - -// set the canvas dimensions canvas.width = 512; canvas.height = 512; - -// get the canvas context const ctx = canvas.getContext("2d"); - -// set the background color ctx.fillStyle = "#e0f8cf"; ctx.fillRect(0, 0, canvas.width, canvas.height); -// create a rectangle +// our noble avatar into playspace const player = { x: 50, y: 50, @@ -63,10 +57,10 @@ document.addEventListener("keydown", (event) => { // game loop function gameLoop() { - // clear the canvas + // clear the canvas every tick ctx.clearRect(0, 0, canvas.width, canvas.height); - // looping canvas space + // looping canvas space so you can't wander out of view // this feels like a hack... if (player.x < 0) { player.x = canvas.width - 1 @@ -81,11 +75,11 @@ function gameLoop() { player.y = 1 } - // draw the rectangle + // draw ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); - // request the next frame + // next frame requestAnimationFrame(gameLoop); } |