diff --git a/web/assets/css/game.css b/web/assets/css/game.css index 607036e..f287f0d 100644 --- a/web/assets/css/game.css +++ b/web/assets/css/game.css @@ -4,7 +4,8 @@ box-sizing: border-box; } -html, body { +html, +body { width: 100vw; height: 100vh; overflow: hidden; @@ -29,6 +30,10 @@ main { flex-shrink: 0; } +/* ================================ + GRID +================================ */ + .map { display: flex; flex-direction: column; @@ -46,12 +51,14 @@ main { margin: 0; } +/* ================================ + CELLS +================================ */ + .cell { border: 1px solid #333333; - min-width: 60px; - width: auto; - min-height: 60px; - height: auto; + width: clamp(28px, 5.5vmin, 60px); + height: clamp(28px, 5.5vmin, 60px); transition: all 0.2s ease; display: flex; align-items: center; @@ -61,6 +68,10 @@ main { background-color: #2a2a2a; } +/* ================================ + CASES TYPE +================================ */ + .empty { background-color: #2a2a2a; border-color: #333333; @@ -72,12 +83,6 @@ main { .laser { background-color: #FFD700; - border-color: #FFA500; -} - -.colored-laser { - background: linear-gradient(135deg, #FF1493 0%, #00CED1 100%); - border-color: #FF1493; } .mirror { @@ -87,34 +92,85 @@ main { overflow: hidden; } -.door { - background: linear-gradient(135deg, #8B4513 0%, #654321 100%); - border-color: #654321; -} - -.button { - background: radial-gradient(circle at 35% 35%, #FF4444 0%, #CC0000 100%); - border-color: #990000; -} - .wall { - background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%); - border-color: #000000; -} - -.demi-wall { - background: linear-gradient(90deg, #0f0f0f 0%, #0f0f0f 50%, #2a2a2a 50%, #2a2a2a 100%); - border-color: #333333; + background-color: #1a1a1a; } .target { - background: radial-gradient(circle at 35% 35%, #00FF00 0%, #00CC00 50%, rgba(0, 255, 0, 0.2) 100%); - border-color: #00FF00; + background: #00FF00; } +/* ================================ + CURSOR PLAYER +================================ */ + +.player-cursor { + outline: 2px solid #00e5ff; + outline-offset: -2px; + z-index: 10; +} + +.player-cursor.mirror { + outline-color: #FFD700; +} + +/* ================================ + LIGHT LASER +================================ */ + .light-laser { + position: relative; + background-color: #2a2a2a; +} + +.laser-horizontal { + background: linear-gradient(to bottom, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #2a2a2a +} + +.laser-vertical { + background: linear-gradient(to right, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #2a2a2a; +} + +/* ================================ + MIRROR +================================ */ + +.btn-mirror { + background: none; + border: none; + cursor: pointer; + height: 100%; + position: relative; +} + +.btn-mirror::after { + content: ''; + position: absolute; + top: 50%; + left: 10%; + width: 80%; height: 2px; - width: 35px; - background-color: red; - background-size: 2px 35px; + background-color: #aaaaaa; + transform-origin: center; +} + +/* ================================ + RESPONSIVE +================================ */ + +@media (max-width: 600px) { + .map { + padding: 5px; + border-radius: 3px; + } + + main { + padding: 8px; + } +} + +@media (max-height: 500px) { + .map { + padding: 4px; + } } \ No newline at end of file diff --git a/web/assets/js/game.js b/web/assets/js/game.js index e8f36d7..06371d6 100644 --- a/web/assets/js/game.js +++ b/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(); } \ No newline at end of file