Compare commits
1 Commits
57b37d0139
...
7e5de16a02
| Author | SHA1 | Date | |
|---|---|---|---|
| 7e5de16a02 |
@@ -12,7 +12,7 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
background: #FFF6E5;
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -26,22 +26,14 @@ main {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
border-radius: 150px;
|
||||
border-radius: 10px;
|
||||
min-width: fit-content;
|
||||
flex-shrink: 0;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.game-layout {
|
||||
width: min(96vw, 1200px);
|
||||
}
|
||||
|
||||
.game-title {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 700;
|
||||
color: #223;
|
||||
letter-spacing: 0.04em;
|
||||
text-align: center;
|
||||
width: min(95vw, 1000px);
|
||||
}
|
||||
|
||||
.toolbox {
|
||||
@@ -74,7 +66,7 @@ main {
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
background: #dadeef;
|
||||
border-radius: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.lign {
|
||||
@@ -82,8 +74,8 @@ main {
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: clamp(28px, 6.2vmin, 72px);
|
||||
height: clamp(28px, 6.2vmin, 72px);
|
||||
width: clamp(28px, 5.5vmin, 60px);
|
||||
height: clamp(28px, 5.5vmin, 60px);
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -127,12 +119,6 @@ main {
|
||||
background-color: #DADEEF;
|
||||
position: relative;
|
||||
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 {
|
||||
@@ -143,24 +129,6 @@ main {
|
||||
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 {
|
||||
background-color: #DADEEF;
|
||||
background-image: url("../img/tiles/WoodenDoor.svg");
|
||||
@@ -353,42 +321,3 @@ main {
|
||||
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,9 +584,10 @@ function traceLaser() {
|
||||
|
||||
function finish() {
|
||||
setTimeout(() => {
|
||||
const winOverlay = document.querySelector(".win-overlay");
|
||||
winOverlay.style.visibility = "visible";
|
||||
alert("Reussi !");
|
||||
}, 100);
|
||||
|
||||
nextLevel();
|
||||
}
|
||||
|
||||
function nextLevel () {
|
||||
@@ -606,9 +607,6 @@ function nextLevel() {
|
||||
activatedButtons = {};
|
||||
openedDoors = {};
|
||||
traceLaser();
|
||||
|
||||
const winOverlay = document.querySelector(".win-overlay");
|
||||
winOverlay.style.visibility = "hidden";
|
||||
}
|
||||
|
||||
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>
|
||||
</head>
|
||||
<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>
|
||||
atOptions = {
|
||||
'key' : '72b6ba1a1c26b9671167b66063c7e699',
|
||||
@@ -27,7 +21,6 @@
|
||||
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
|
||||
|
||||
<main class="game-layout">
|
||||
<h1 class="game-title">Mirror Game</h1>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<section class="toolbox">
|
||||
@@ -35,16 +28,6 @@
|
||||
<div id="glass-palette" class="glass-palette"></div>
|
||||
</section>
|
||||
</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>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user