Upgrade of design of light of laser + add posibility to move a cursor and rotate mirror with keyboard

web/assets/js/game.js

@@ -28,6 +28,10 @@ let level1 = [
     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 ]
 
+// Player position
+let playerX = 0;
+let playerY = 0;
+
 // Function to save initial orientation of mirrors
 let laserDirection = { dx: 0, dy: 0 };
 let mirrorOrientations = {};
@@ -73,7 +77,6 @@ function loadGrid() {
                     const currentAngle = mirrorOrientations[`${y},${x}`] || 0;
                     const btnMirror = document.createElement("button");
                     btnMirror.classList.add("btn-mirror");
-                    btnMirror.addEventListener("click", () => rotateMirror(btnMirror, x, y));
                     btnMirror.style.transform = `rotate(${currentAngle}deg)`;
                     btnMirror.style.width = "100%";
                     cell.appendChild(btnMirror);
@@ -96,9 +99,18 @@ function loadGrid() {
                     break;
                 case legend.ligthLaser:
                     cell.classList.add("light-laser");
+                    if (laserDirection.dx === 0) {
+                        cell.classList.add("laser-vertical");
+                    } else {
+                        cell.classList.add("laser-horizontal");
+                    }
                     break;
             }
 
+            if (x === playerX && y === playerY) {
+                cell.classList.add("player-cursor");
+            }
+
             lign.appendChild(cell);
         }
 
@@ -110,16 +122,21 @@ loadGrid();
 
 // Function to rotate mirror
 
-function rotateMirror(mirrorElement, x, y) {
+function rotateMirror(x, y) {
     const coordKey = `${y},${x}`;
+
+    // See if it's a mirror
+    if (level1[y][x] !== legend.mirror) {
+        return
+    };
+
     let currentAngle = mirrorOrientations[coordKey] || 0;
 
-    // Rotation 45°
+    // Rotation
     currentAngle = (currentAngle + 45) % 360;
-    mirrorOrientations[coordKey] = currentAngle;
 
-    // New rotation
-    mirrorElement.style.transform = `rotate(${currentAngle}deg)`;
+    // Save
+    mirrorOrientations[coordKey] = currentAngle;
 
     // Print laser light
     traceLaser(true);
@@ -198,10 +215,8 @@ function traceLaser() {
                 break;
 
             case legend.mirror:
-                // Change direction based on mirror angle
                 const mirrorAngle = mirrorOrientations[`${currentY},${currentX}`] || 0;
 
-                // 0° or 180°: reflect horizontal
                 if (mirrorAngle === 0 || mirrorAngle === 180) {
                     laserDirection.dy = -laserDirection.dy;
                 } else {
@@ -257,5 +272,74 @@ traceLaser();
 
 // If level finishh -> call this function
 function finish() {
-    alert("Réussi !");
+    setTimeout(() => {
+        alert("Réussi !");
+    }, 100);
+}
+
+
+// Get player inputs arrows, qwerty and azerty
+
+document.addEventListener("keydown", (e) => {
+
+    // If level finish -> don't move
+    if (isLevelFinished === true) {
+        return;
+    }
+
+    switch (e.key) {
+        case "ArrowUp":
+            movePlayer(0, -1);
+            break;
+        case "w":
+            movePlayer(0, -1);
+            break;
+        case "z":
+            movePlayer(0, -1);
+            break;
+        case "ArrowDown":
+            movePlayer(0, 1);
+            break;
+        case "s":
+            movePlayer(0, 1);
+            break;
+        case "ArrowLeft":
+            movePlayer(-1, 0);
+            break;
+        case "a":
+            movePlayer(-1, 0);
+            break;
+        case "q":
+            movePlayer(-1, 0);
+            break;
+        case "ArrowRight":
+            movePlayer(1, 0);
+            break;
+        case "d":
+            movePlayer(1, 0);
+            break;
+        case "Enter":
+            rotateMirror(playerX, playerY);
+            break;
+    }
+});
+
+// Player move
+
+function movePlayer(x, y) {
+    const newX = playerX + x;
+    const newY = playerY + y;
+
+    if (newX < 0 || newX >= level1[0].length) {
+        return
+    };
+
+    if (newY < 0 || newY >= level1.length) {
+        return
+    };
+
+    playerX = newX;
+    playerY = newY;
+
+    loadGrid();
 }