about summary refs log tree commit diff stats
path: root/js/canvas
diff options
context:
space:
mode:
authorelioat <elioat@tilde.institute>2023-10-30 15:58:24 -0400
committerelioat <elioat@tilde.institute>2023-10-30 15:58:24 -0400
commita0c4292dc2ea9ee11ab3aceda4aa5ced31ba8dcf (patch)
tree46e09cb4fcd95e9adf02fa9026884b46eb8fc749 /js/canvas
parent49cd6866163f168c95d3b18692710464440fc0ab (diff)
downloadtour-a0c4292dc2ea9ee11ab3aceda4aa5ced31ba8dcf.tar.gz
*
Diffstat (limited to 'js/canvas')
-rw-r--r--js/canvas/game.js18
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);
 }