From 49cd6866163f168c95d3b18692710464440fc0ab Mon Sep 17 00:00:00 2001
From: elioat <hi@eli.li>
Date: Mon, 30 Oct 2023 15:40:53 -0400
Subject: *

---
 js/canvas/game.js    | 51 ++++++++++++++++++++++++++++-----------------------
 js/canvas/index.html |  1 +
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/js/canvas/game.js b/js/canvas/game.js
index 7b02bde..e8ef51f 100644
--- a/js/canvas/game.js
+++ b/js/canvas/game.js
@@ -13,7 +13,7 @@ ctx.fillStyle = "#e0f8cf";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 
 // create a rectangle
-const rect = {
+const player = {
   x: 50,
   y: 50,
   width: 16,
@@ -23,62 +23,67 @@ const rect = {
   colorAlt: "pink"
 };
 
-// draw the rectangle
-ctx.fillStyle = rect.color;
-ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-
-// move the rectangle
-rect.x += 5;
-
-// clear the canvas
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-// draw the rectangle
-ctx.fillStyle = rect.color;
-ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-
 // 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.
+// For more info, <https://medium.com/@dovern42/handling-multiple-key-presses-at-once-in-vanilla-javascript-for-game-controllers-6dcacae931b7>
 document.addEventListener("keydown", (event) => {
   switch (event.code) {
     case "ArrowLeft":
     case "KeyH":
     case "KeyA":
-      rect.x -= rect.step;
+      player.x -= player.step;
       break;
     case "ArrowRight":
     case "KeyL":
     case "KeyD":
-      rect.x += rect.step;
+      player.x += player.step;
       break;
     case "ArrowUp":
     case "KeyK":
     case "KeyW":
-      rect.y -= rect.step;
+      player.y -= player.step;
       break;
     case "ArrowDown":
     case "KeyJ":
     case "KeyS":
-      rect.y += rect.step;
+      player.y += player.step;
       break;
     case "KeyZ":
     case "KeyN":
-      rect.color = "#65ff00";
+      player.color = "#65ff00";
       break;
     case "KeyX":
     case "KeyM":
-      rect.color = rect.colorAlt;
+      player.color = player.colorAlt;
       break;
   }
 });
 
+
 // game loop
 function gameLoop() {
   // clear the canvas
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
+  // looping canvas space
+  // this feels like a hack...
+  if (player.x < 0) {
+    player.x = canvas.width - 1
+  }
+  if (player.x > canvas.width) {
+    player.x = 1
+  }
+  if (player.y < 0) {
+    player.y = canvas.height - 1
+  }
+  if (player.y > canvas.height) {
+    player.y = 1
+  }
+
   // draw the rectangle
-  ctx.fillStyle = rect.color;
-  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+  ctx.fillStyle = player.color;
+  ctx.fillRect(player.x, player.y, player.width, player.height);
 
   // request the next frame
   requestAnimationFrame(gameLoop);
diff --git a/js/canvas/index.html b/js/canvas/index.html
index 7b5df21..2d887fe 100644
--- a/js/canvas/index.html
+++ b/js/canvas/index.html
@@ -7,6 +7,7 @@
 	<style type="text/css">
 		body {
 			padding: 1em 0;
+			background-color: darkgray;
 		}
 		#gameCanvas {
 		  border: 1px solid black;
-- 
cgit 1.4.1-2-gfad0