diff --git a/web/assets/css/game.css b/web/assets/css/game.css index 8ffa561..b9068bd 100644 --- a/web/assets/css/game.css +++ b/web/assets/css/game.css @@ -143,6 +143,22 @@ main { background-position: center; } +.wall-semi-angle { + background-color: #DADEEF; + background-image: url("../img/tiles/BottomLeft.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.horizontal-semi { + background-color: #DADEEF; + background-image: url("../img/tiles/HorizontaleSemi.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: bottom; +} + .captor { background-color: #DADEEF; background-image: url("../img/tiles/Capteur-1.svg"); @@ -160,13 +176,37 @@ main { background-position: center; } -.cable { +.captor-turn-reverse { background-color: #DADEEF; - background-image: url("../img/tiles/CableV.svg"); + background-image: url("../img/tiles/Capteur-2.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + transform: rotate(180deg); +} + +.captor-turn-horizontale2 { + background-color: #DADEEF; + background-image: url("../img/tiles/Capteur-1.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.cable { + background-color: #DADEEF; + background-image: url("../img/tiles/CableH.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.cable-turn { + background-color: #DADEEF; + background-image: url("../img/tiles/CableBottomLeft.svg"); background-size: 100%; background-repeat: no-repeat; background-position: center; - transform: rotate(90deg); } .cable-vertical { @@ -177,6 +217,23 @@ main { background-position: center; } +.cable-turn-horizontale { + background-color: #DADEEF; + background-image: url("../img/tiles/CableTopLeft.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.cable-turn-horizontale2 { + background-color: #DADEEF; + background-image: url("../img/tiles/CableTopLeft.svg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + transform: rotate(180deg); +} + .door { background-color: #DADEEF; background-image: url("../img/tiles/WoodenDoor.svg"); @@ -238,7 +295,7 @@ main { .demi-wall-corner-down-left { background-color: #DADEEF; - background-image: url("../img/tiles/BottomLeft.svg"); + background-image: url("../img/tiles/BottomLeftAngle.svg"); background-size: 100%; background-repeat: no-repeat; background-position: center; @@ -246,7 +303,7 @@ main { .demi-wall-corner-down-right { background-color: #DADEEF; - background-image: url("../img/tiles/BottomRight.svg"); + background-image: url("../img/tiles/BottomRightAngle.svg"); background-size: 100%; background-repeat: no-repeat; background-position: center; diff --git a/web/assets/img/tiles/BottomLeft.svg b/web/assets/img/tiles/BottomLeft.svg index 15a864e..1a1e438 100644 --- a/web/assets/img/tiles/BottomLeft.svg +++ b/web/assets/img/tiles/BottomLeft.svg @@ -1,17 +1,19 @@ - + - - - - + + + + + + - + - + diff --git a/web/assets/img/tiles/BottomLeftAngle.svg b/web/assets/img/tiles/BottomLeftAngle.svg new file mode 100644 index 0000000..15a864e --- /dev/null +++ b/web/assets/img/tiles/BottomLeftAngle.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/img/tiles/BottomRight.svg b/web/assets/img/tiles/BottomRight.svg index 3e8e4df..cd4ff05 100644 --- a/web/assets/img/tiles/BottomRight.svg +++ b/web/assets/img/tiles/BottomRight.svg @@ -1,17 +1,19 @@ - + - - - - + + + + + + - + - + diff --git a/web/assets/img/tiles/BottomRightAngle.svg b/web/assets/img/tiles/BottomRightAngle.svg new file mode 100644 index 0000000..3e8e4df --- /dev/null +++ b/web/assets/img/tiles/BottomRightAngle.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/js/game.js b/web/assets/js/game.js index f6be360..016594d 100644 --- a/web/assets/js/game.js +++ b/web/assets/js/game.js @@ -20,6 +20,13 @@ const legend = { cable: 16, captorTurn: 17, cableVertical: 18, + captorTurnReturn: 19, + cableTurn: 21, + horizontalSemi: 22, + cableTurnHorizontale : 23, + cableTurnHorizontale2 : 24, + captorTurnHorizontal : 25, + wallSemiAngle: 26, }; const laserColors = { @@ -62,6 +69,19 @@ 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, 6, 6, 6, 6, 6, 7, 10, 6, 6, 11, 0, 0, 0, 0], + [0, 1, 0, 0, 0, 4, 0, 0, 0, 3, 21, 0, 0, 0, 0], + [0, 6, 6, 6, 6, 18, 6, 26, 22, 0, 18, 0, 0, 0, 0], + [0, 6, 9, 0, 0, 19, 0, 0, 0, 12, 18, 0, 0, 0, 0], + [0, 6, 0, 6, 6, 6, 6, 6, 6, 24, 23, 0, 0, 0, 0], + [0, 6, 11, 0, 0, 0, 0, 0, 25, 23, 9, 0, 0, 0, 0], + [0, 10, 6, 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, 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], @@ -430,6 +450,27 @@ function loadGrid() { case legend.cableVertical: cell.classList.add("cable-vertical"); break; + case legend.captorTurnReturn: + cell.classList.add("captor-turn-reverse"); + break; + case legend.cableTurn: + cell.classList.add("cable-turn"); + break; + case legend.horizontalSemi: + cell.classList.add("horizontal-semi"); + break; + case legend.cableTurnHorizontale: + cell.classList.add("cable-turn-horizontale"); + break; + case legend.cableTurnHorizontale2: + cell.classList.add("cable-turn-horizontale2"); + break; + case legend.captorTurnHorizontal: + cell.classList.add("captor-turn-horizontale2"); + break; + case legend.wallSemiAngle: + cell.classList.add("wall-semi-angle"); + break; } drawLaserInCell(cell, laserSegments[`${y},${x}`]);