diff --git a/web/assets/css/game.css b/web/assets/css/game.css index 065e5e3..bff5d45 100644 --- a/web/assets/css/game.css +++ b/web/assets/css/game.css @@ -71,6 +71,7 @@ main { .empty { background-color: #DADEEF; + border-color: #DADEEF; } .empty:hover { @@ -78,24 +79,102 @@ main { } .laser { - background-color: #FFD700; + background-color: #DADEEF; + background-image: url("../img/tiles/Laser.svg"); + background-size: 80%; + background-repeat: no-repeat; + background-position: center; + transform: rotate(180deg); +} + +.colored-laser { + background-color: #DADEEF; + background-image: url("../img/tiles/Prisme.svg"); + background-size: 80%; + background-repeat: no-repeat; + background-position: center; } .mirror { background-color: #DADEEF; - border-color: #444444; position: relative; overflow: hidden; } .wall { background-color: #DADEEF; + background-image: url("../img/tiles/Tuile.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.door { + background-color: #DADEEF; + background-image: url("../img/tiles/WoodenDoor.svg"); + transform: rotate(90deg); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.button { + background-color: #DADEEF; + background-image: url("../img/tiles/ButtonComplete.svg"), url("../img/tiles/Tuile.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; +} + +.demi-wall { + background-color: #DADEEF; + background-image: url("../img/tiles/VerticaleSemi.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; } .target { - background: #00FF00; + background-color: #DADEEF; + background-image: url("../img/tiles/Trigger.svg"); + background-size: 80%; + background-repeat: no-repeat; + background-position: center; } +.demi-wall-corner-up-left { + background-color: #DADEEF; + background-image: url("../img/tiles/TopLeft.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.demi-wall-corner-up-right { + background-color: #DADEEF; + background-image: url("../img/tiles/TopRight.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.demi-wall-corner-down-left { + background-color: #DADEEF; + background-image: url("../img/tiles/BottomLeft.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.demi-wall-corner-down-right { + background-color: #DADEEF; + background-image: url("../img/tiles/BottomRight.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + + /* ================================ LIGHT LASER ================================ */ @@ -129,18 +208,17 @@ main { border: none; cursor: pointer; height: 100%; + width: 100%; position: relative; + display: flex; + align-items: center; + justify-content: center; } -.btn-mirror::after { - content: ''; - position: absolute; - top: 50%; - left: 10%; +.mirror-img { width: 80%; - height: 2px; - background-color: #aaaaaa; - transform-origin: center; + height: 80%; + object-fit: contain; } /* ================================ diff --git a/web/assets/img/tiles/BlueMirror.svg b/web/assets/img/tiles/BlueMirror.svg new file mode 100644 index 0000000..f86033a --- /dev/null +++ b/web/assets/img/tiles/BlueMirror.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/assets/img/tiles/BottomLeft-1.svg b/web/assets/img/tiles/BottomLeft-1.svg new file mode 100644 index 0000000..dbbb4da --- /dev/null +++ b/web/assets/img/tiles/BottomLeft-1.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/BottomLeft-2.svg b/web/assets/img/tiles/BottomLeft-2.svg new file mode 100644 index 0000000..b6c8f15 --- /dev/null +++ b/web/assets/img/tiles/BottomLeft-2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/BottomLeft.svg b/web/assets/img/tiles/BottomLeft.svg new file mode 100644 index 0000000..15a864e --- /dev/null +++ b/web/assets/img/tiles/BottomLeft.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/BottomRight-1.svg b/web/assets/img/tiles/BottomRight-1.svg new file mode 100644 index 0000000..c316dc7 --- /dev/null +++ b/web/assets/img/tiles/BottomRight-1.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/BottomRight-2.svg b/web/assets/img/tiles/BottomRight-2.svg new file mode 100644 index 0000000..a1e5bcb --- /dev/null +++ b/web/assets/img/tiles/BottomRight-2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/BottomRight.svg b/web/assets/img/tiles/BottomRight.svg new file mode 100644 index 0000000..3e8e4df --- /dev/null +++ b/web/assets/img/tiles/BottomRight.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/ButtonComplete.svg b/web/assets/img/tiles/ButtonComplete.svg new file mode 100644 index 0000000..440195e --- /dev/null +++ b/web/assets/img/tiles/ButtonComplete.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/ButtonProfile.svg b/web/assets/img/tiles/ButtonProfile.svg new file mode 100644 index 0000000..9f0380d --- /dev/null +++ b/web/assets/img/tiles/ButtonProfile.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/ButtonQuarter.svg b/web/assets/img/tiles/ButtonQuarter.svg new file mode 100644 index 0000000..9bb3afa --- /dev/null +++ b/web/assets/img/tiles/ButtonQuarter.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/CableBottomLeft.svg b/web/assets/img/tiles/CableBottomLeft.svg new file mode 100644 index 0000000..2de6044 --- /dev/null +++ b/web/assets/img/tiles/CableBottomLeft.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/CableBottomRight.svg b/web/assets/img/tiles/CableBottomRight.svg new file mode 100644 index 0000000..0435974 --- /dev/null +++ b/web/assets/img/tiles/CableBottomRight.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/CableH.svg b/web/assets/img/tiles/CableH.svg new file mode 100644 index 0000000..440786e --- /dev/null +++ b/web/assets/img/tiles/CableH.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/CableTopLeft.svg b/web/assets/img/tiles/CableTopLeft.svg new file mode 100644 index 0000000..66da788 --- /dev/null +++ b/web/assets/img/tiles/CableTopLeft.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/CableTopRight.svg b/web/assets/img/tiles/CableTopRight.svg new file mode 100644 index 0000000..6c7f58a --- /dev/null +++ b/web/assets/img/tiles/CableTopRight.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/CableV.svg b/web/assets/img/tiles/CableV.svg new file mode 100644 index 0000000..3b091be --- /dev/null +++ b/web/assets/img/tiles/CableV.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/Capteur-1.svg b/web/assets/img/tiles/Capteur-1.svg new file mode 100644 index 0000000..963bdb5 --- /dev/null +++ b/web/assets/img/tiles/Capteur-1.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/Capteur-2.svg b/web/assets/img/tiles/Capteur-2.svg new file mode 100644 index 0000000..8e27567 --- /dev/null +++ b/web/assets/img/tiles/Capteur-2.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/Capteur.svg b/web/assets/img/tiles/Capteur.svg new file mode 100644 index 0000000..931ae79 --- /dev/null +++ b/web/assets/img/tiles/Capteur.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/HorizontaleSemi.svg b/web/assets/img/tiles/HorizontaleSemi.svg new file mode 100644 index 0000000..d08d2bb --- /dev/null +++ b/web/assets/img/tiles/HorizontaleSemi.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/Laser.svg b/web/assets/img/tiles/Laser.svg new file mode 100644 index 0000000..354d5b8 --- /dev/null +++ b/web/assets/img/tiles/Laser.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/MetalDoor.svg b/web/assets/img/tiles/MetalDoor.svg new file mode 100644 index 0000000..c28b339 --- /dev/null +++ b/web/assets/img/tiles/MetalDoor.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/MetalMirror.svg b/web/assets/img/tiles/MetalMirror.svg new file mode 100644 index 0000000..8db4eb9 --- /dev/null +++ b/web/assets/img/tiles/MetalMirror.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/Mirror.svg b/web/assets/img/tiles/Mirror.svg new file mode 100644 index 0000000..56cc5f1 --- /dev/null +++ b/web/assets/img/tiles/Mirror.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/Prisme.svg b/web/assets/img/tiles/Prisme.svg new file mode 100644 index 0000000..1c05d06 --- /dev/null +++ b/web/assets/img/tiles/Prisme.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/assets/img/tiles/RedMirror.svg b/web/assets/img/tiles/RedMirror.svg new file mode 100644 index 0000000..acbbba0 --- /dev/null +++ b/web/assets/img/tiles/RedMirror.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/assets/img/tiles/TopLeft-1.svg b/web/assets/img/tiles/TopLeft-1.svg new file mode 100644 index 0000000..8a3dbc1 --- /dev/null +++ b/web/assets/img/tiles/TopLeft-1.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/TopLeft-2.svg b/web/assets/img/tiles/TopLeft-2.svg new file mode 100644 index 0000000..026a2ee --- /dev/null +++ b/web/assets/img/tiles/TopLeft-2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/TopLeft.svg b/web/assets/img/tiles/TopLeft.svg new file mode 100644 index 0000000..ea2e90d --- /dev/null +++ b/web/assets/img/tiles/TopLeft.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/TopRight-1.svg b/web/assets/img/tiles/TopRight-1.svg new file mode 100644 index 0000000..d01eafe --- /dev/null +++ b/web/assets/img/tiles/TopRight-1.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/TopRight-2.svg b/web/assets/img/tiles/TopRight-2.svg new file mode 100644 index 0000000..c4e54a5 --- /dev/null +++ b/web/assets/img/tiles/TopRight-2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/TopRight.svg b/web/assets/img/tiles/TopRight.svg new file mode 100644 index 0000000..81e21f4 --- /dev/null +++ b/web/assets/img/tiles/TopRight.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/Trigger.svg b/web/assets/img/tiles/Trigger.svg new file mode 100644 index 0000000..324fefa --- /dev/null +++ b/web/assets/img/tiles/Trigger.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/Tuile.svg b/web/assets/img/tiles/Tuile.svg new file mode 100644 index 0000000..2b7bce9 --- /dev/null +++ b/web/assets/img/tiles/Tuile.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/VerticaleSemi.svg b/web/assets/img/tiles/VerticaleSemi.svg new file mode 100644 index 0000000..3fa0309 --- /dev/null +++ b/web/assets/img/tiles/VerticaleSemi.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/WoodenDoor.svg b/web/assets/img/tiles/WoodenDoor.svg new file mode 100644 index 0000000..970a126 --- /dev/null +++ b/web/assets/img/tiles/WoodenDoor.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/WoodenMirror.svg b/web/assets/img/tiles/WoodenMirror.svg new file mode 100644 index 0000000..56cc5f1 --- /dev/null +++ b/web/assets/img/tiles/WoodenMirror.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/YellowMirror.svg b/web/assets/img/tiles/YellowMirror.svg new file mode 100644 index 0000000..268a7a9 --- /dev/null +++ b/web/assets/img/tiles/YellowMirror.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/assets/js/game.js b/web/assets/js/game.js index db6ea50..c0e1e21 100644 --- a/web/assets/js/game.js +++ b/web/assets/js/game.js @@ -8,25 +8,32 @@ const legend = { door: 4, button: 5, wall: 6, - demiWall: 7, - target: 8, - ligthLaser: 9, + target: 7, + ligthLaser: 8, + demiWallCornerUpLeft: 9, + demiWallCornerUpRight: 10, + demiWallCornerDownLeft: 11, + demiWallCornerDownRight: 12 } // Grid test -let level1 = [ - [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 3, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0], - [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0], - [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], -] +let levels = [ + [ + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0], + [0, 0, 0, 0, 1, 0, 0, 4, 0, 10, 6, 0, 0, 0, 0], + [0, 0, 0, 0, 7, 6, 6, 5, 6, 0, 6, 0, 0, 0, 0], + [0, 0, 0, 0, 3, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0], + [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + ] +]; + +let currentLevelIndex = 0; // Function to save initial orientation of mirrors let laserDirection = { dx: 0, dy: 0 }; @@ -74,9 +81,9 @@ function getLaserSegmentClass(segmentDirection) { function initializeMirrorOrientations() { mirrorOrientations = {}; // Reset - for (let y = 0; y < level1.length; y++) { - for (let x = 0; x < level1[y].length; x++) { - if (level1[y][x] === legend.mirror) { + for (let y = 0; y < levels[currentLevelIndex].length; y++) { + for (let x = 0; x < levels[currentLevelIndex][y].length; x++) { + if (levels[currentLevelIndex][y][x] === legend.mirror) { mirrorOrientations[`${y},${x}`] = 0; // Default angle } } @@ -91,15 +98,15 @@ function loadGrid() { const mapDiv = document.getElementById("map"); // Div with map in DOM mapDiv.innerHTML = ""; - for (let y = 0; y < level1.length; y++) { + for (let y = 0; y < levels[currentLevelIndex].length; y++) { const lign = document.createElement("div"); lign.classList.add("lign"); - for (let x = 0; x < level1[y].length; x++) { + for (let x = 0; x < levels[currentLevelIndex][y].length; x++) { const cell = document.createElement("div"); cell.classList.add("cell"); - switch (level1[y][x]) { + switch (levels[currentLevelIndex][y][x]) { case legend.empty: cell.classList.add("empty"); break; @@ -115,7 +122,11 @@ function loadGrid() { btnMirror.classList.add("btn-mirror"); btnMirror.type = "button"; btnMirror.style.transform = `rotate(${currentAngle}deg)`; - btnMirror.style.width = "100%"; + const img = document.createElement("img"); + img.src = "../../assets/img/tiles/Mirror.svg"; + img.style.rotate = `${currentAngle}deg`; + img.className = "mirror-img"; + btnMirror.appendChild(img); btnMirror.onmousedown = (e) => { e.preventDefault(); e.stopPropagation(); @@ -146,6 +157,18 @@ function loadGrid() { const segmentDirection = laserSegments[`${y},${x}`]; cell.classList.add(getLaserSegmentClass(segmentDirection)); break; + case legend.demiWallCornerUpLeft: + cell.classList.add("demi-wall-corner-up-left"); + break; + case legend.demiWallCornerUpRight: + cell.classList.add("demi-wall-corner-up-right"); + break; + case legend.demiWallCornerDownLeft: + cell.classList.add("demi-wall-corner-down-left"); + break; + case legend.demiWallCornerDownRight: + cell.classList.add("demi-wall-corner-down-right"); + break; } lign.appendChild(cell); @@ -162,7 +185,7 @@ loadGrid(); function rotateMirror(x, y, isRightClick) { const coordKey = `${y},${x}`; - if (level1[y][x] !== legend.mirror) { + if (levels[currentLevelIndex][y][x] !== legend.mirror) { return; } @@ -189,10 +212,10 @@ let isLevelFinished = false; function traceLaser() { // Reset light laser from previous trace laserSegments = {}; - for (let y = 0; y < level1.length; y++) { - for (let x = 0; x < level1[y].length; x++) { - if (level1[y][x] === legend.ligthLaser) { - level1[y][x] = legend.empty; + for (let y = 0; y < levels[currentLevelIndex].length; y++) { + for (let x = 0; x < levels[currentLevelIndex][y].length; x++) { + if (levels[currentLevelIndex][y][x] === legend.ligthLaser) { + levels[currentLevelIndex][y][x] = legend.empty; } } } @@ -201,9 +224,9 @@ function traceLaser() { let startLaserY; // Search laser - for (let y = 0; y < level1.length; y++) { - for (let x = 0; x < level1[y].length; x++) { - if (level1[y][x] === legend.laser) { + for (let y = 0; y < levels[currentLevelIndex].length; y++) { + for (let x = 0; x < levels[currentLevelIndex][y].length; x++) { + if (levels[currentLevelIndex][y][x] === legend.laser) { startLaserX = x; startLaserY = y; laserDirection = { dx: 1, dy: 0 }; @@ -231,12 +254,12 @@ function traceLaser() { currentY += laserDirection.dy; // Out of bounds - if (currentX < 0 || currentX >= level1[0].length || currentY < 0 || currentY >= level1.length) { + if (currentX < 0 || currentX >= levels[currentLevelIndex][0].length || currentY < 0 || currentY >= levels[currentLevelIndex].length) { laserActive = false; break; } - const cellType = level1[currentY][currentX]; + const cellType = levels[currentLevelIndex][currentY][currentX]; switch (cellType) { case legend.laser: @@ -245,12 +268,12 @@ function traceLaser() { break; case legend.empty: - level1[currentY][currentX] = legend.ligthLaser; + levels[currentLevelIndex][currentY][currentX] = legend.ligthLaser; laserSegments[`${currentY},${currentX}`] = { ...laserDirection }; break; case legend.target: - level1[currentY][currentX] = legend.ligthLaser; + levels[currentLevelIndex][currentY][currentX] = legend.ligthLaser; laserSegments[`${currentY},${currentX}`] = { ...laserDirection }; laserActive = false; isLevelFinished = true; @@ -274,13 +297,26 @@ function traceLaser() { break; case legend.button: - level1[currentY][currentX] = legend.ligthLaser; + levels[currentLevelIndex][currentY][currentX] = legend.ligthLaser; laserSegments[`${currentY},${currentX}`] = { ...laserDirection }; laserActive = false; break; + case legend.demiWallCornerUpLeft: + laserDirection = reflectLaser(laserDirection, 135); + break; + case legend.demiWallCornerUpRight: + laserDirection = reflectLaser(laserDirection, 90); + break; + case legend.demiWallCornerDownLeft: + laserDirection = reflectLaser(laserDirection, 135); + break; + case legend.demiWallCornerDownRight: + laserDirection = reflectLaser(laserDirection, 45); + break; + default: - level1[currentY][currentX] = legend.ligthLaser; + levels[currentLevelIndex][currentY][currentX] = legend.ligthLaser; laserSegments[`${currentY},${currentX}`] = { ...laserDirection }; break; }