Compare commits
1 Commits
57b37d0139
...
7e5de16a02
| Author | SHA1 | Date | |
|---|---|---|---|
| 7e5de16a02 |
@@ -12,7 +12,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #FFF6E5;
|
background: #f7f7f7;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -26,22 +26,14 @@ main {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 150px;
|
border-radius: 10px;
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-layout {
|
.game-layout {
|
||||||
width: min(96vw, 1200px);
|
width: min(95vw, 1000px);
|
||||||
}
|
|
||||||
|
|
||||||
.game-title {
|
|
||||||
font-size: clamp(2rem, 4vw, 3rem);
|
|
||||||
font-weight: 700;
|
|
||||||
color: #223;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbox {
|
.toolbox {
|
||||||
@@ -74,7 +66,7 @@ main {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #dadeef;
|
background: #dadeef;
|
||||||
border-radius: 15px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lign {
|
.lign {
|
||||||
@@ -82,8 +74,8 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
width: clamp(28px, 6.2vmin, 72px);
|
width: clamp(28px, 5.5vmin, 60px);
|
||||||
height: clamp(28px, 6.2vmin, 72px);
|
height: clamp(28px, 5.5vmin, 60px);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -127,12 +119,6 @@ main {
|
|||||||
background-color: #DADEEF;
|
background-color: #DADEEF;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-moz-transform: scaleX(-1);
|
|
||||||
-webkit-transform: scaleX(-1);
|
|
||||||
-o-transform: scaleX(-1);
|
|
||||||
transform: scaleX(-1);
|
|
||||||
-ms-filter: fliph; /*IE*/
|
|
||||||
filter: fliph; /*IE*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wall {
|
.wall {
|
||||||
@@ -143,24 +129,6 @@ main {
|
|||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.captor {
|
|
||||||
background-color: #DADEEF;
|
|
||||||
background-image: url("../img/tiles/Capteur-1.svg");
|
|
||||||
background-size: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cable {
|
|
||||||
background-color: #DADEEF;
|
|
||||||
background-image: url("../img/tiles/CableV.svg");
|
|
||||||
background-size: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.door {
|
.door {
|
||||||
background-color: #DADEEF;
|
background-color: #DADEEF;
|
||||||
background-image: url("../img/tiles/WoodenDoor.svg");
|
background-image: url("../img/tiles/WoodenDoor.svg");
|
||||||
@@ -353,42 +321,3 @@ main {
|
|||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.win-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
visibility: hidden;
|
|
||||||
gap: 20px;
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.win-overlay h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.win-overlay p {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.win-overlay button {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #fff;
|
|
||||||
color: #000;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -584,12 +584,13 @@ function traceLaser() {
|
|||||||
|
|
||||||
function finish() {
|
function finish() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const winOverlay = document.querySelector(".win-overlay");
|
alert("Reussi !");
|
||||||
winOverlay.style.visibility = "visible";
|
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
|
nextLevel();
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextLevel() {
|
function nextLevel () {
|
||||||
currentLevelIndex++;
|
currentLevelIndex++;
|
||||||
|
|
||||||
isLevelFinished = false;
|
isLevelFinished = false;
|
||||||
@@ -606,9 +607,6 @@ function nextLevel() {
|
|||||||
activatedButtons = {};
|
activatedButtons = {};
|
||||||
openedDoors = {};
|
openedDoors = {};
|
||||||
traceLaser();
|
traceLaser();
|
||||||
|
|
||||||
const winOverlay = document.querySelector(".win-overlay");
|
|
||||||
winOverlay.style.visibility = "hidden";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createPalette();
|
createPalette();
|
||||||
|
|||||||
@@ -9,12 +9,6 @@
|
|||||||
<script>(function(s){s.dataset.zone='10809853',s.src='https://nap5k.com/tag.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
|
<script>(function(s){s.dataset.zone='10809853',s.src='https://nap5k.com/tag.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="win-overlay">
|
|
||||||
<h1>You win!</h1>
|
|
||||||
<p>You have completed the level.</p>
|
|
||||||
<button class="win-button" onclick="nextLevel()">Next Level</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
atOptions = {
|
atOptions = {
|
||||||
'key' : '72b6ba1a1c26b9671167b66063c7e699',
|
'key' : '72b6ba1a1c26b9671167b66063c7e699',
|
||||||
@@ -27,7 +21,6 @@
|
|||||||
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
|
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
|
||||||
|
|
||||||
<main class="game-layout">
|
<main class="game-layout">
|
||||||
<h1 class="game-title">Mirror Game</h1>
|
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|
||||||
<section class="toolbox">
|
<section class="toolbox">
|
||||||
@@ -35,17 +28,7 @@
|
|||||||
<div id="glass-palette" class="glass-palette"></div>
|
<div id="glass-palette" class="glass-palette"></div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<script>
|
|
||||||
atOptions = {
|
|
||||||
'key' : '72b6ba1a1c26b9671167b66063c7e699',
|
|
||||||
'format' : 'iframe',
|
|
||||||
'height' : 600,
|
|
||||||
'width' : 160,
|
|
||||||
'params' : {}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
|
|
||||||
|
|
||||||
<script src="../../assets/js/game.js" defer></script>
|
<script src="../../assets/js/game.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user