Add last game

This commit is contained in:
Gabriel Augendre 2021-06-04 23:47:52 +02:00
parent 559195dbe7
commit 6c1d77cbf5
8 changed files with 71 additions and 1 deletions

View file

@ -14,7 +14,7 @@
<ul> <ul>
<li><a href="jeux/signal.html">Signal</a></li> <li><a href="jeux/signal.html">Signal</a></li>
<li><a href="jeux/camel.html">Camel</a></li> <li><a href="jeux/camel.html">Camel</a></li>
<li><a href="jeux/urbain.html">Urbain Nature</a></li> <li><a href="jeux/nature.html">Urbain Nature</a></li>
</ul> </ul>
<footer> <footer>
<p> <p>

View file

@ -0,0 +1,5 @@
.img-holder {
position: relative;
top: 0;
left: 0;
}

View file

@ -0,0 +1,32 @@
const MAX_LEAVES = 1000;
let counter = MAX_LEAVES;
function loadLeaves() {
for (let i = 0; i < MAX_LEAVES; i++) {
const img = document.createElement("img");
const moquette = document.getElementById("moquette");
const id = Math.floor(Math.random() * 3) + 1;
img.src = `images/feuille-${id}.png`;
img.classList.add("hidden");
img.addEventListener("mouseover", disappear);
const maxTop = moquette.height - img.height;
const maxLeft = moquette.width - img.width;
const top = Math.floor(Math.random() * maxTop);
const left = Math.floor(Math.random() * maxLeft);
const angle = Math.floor(Math.random() * 360);
img.style = `position: absolute; top: ${top}px; left: ${left}px; transform: rotate(${angle}deg);`;
img.classList.remove("hidden");
moquette.parentElement.appendChild(img);
}
}
function disappear() {
this.remove();
counter--;
if (counter <= 0) {
counter = 0;
win();
}
}
loadLeaves();

BIN
jeux/images/feuille-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
jeux/images/feuille-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
jeux/images/feuille-3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
jeux/images/nature.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 481 KiB

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Urbain Nature</title>
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/nature.css">
</head>
<body>
<h1>Urbain Nature</h1>
<nav><a href="..">&laquo; Retour</a></nav>
<p>
Oh non ! Quelqu'un a laissé les fenêtres ouvertes sur le plateau de la certif et
tout est recouvert de feuilles mortes... Vite ! Prenez votre souris et balayez tout
ça !
</p>
<p class="img-holder">
<img src="images/nature.jpg" id="moquette" width="620" height="652" alt="Moquette">
</p>
<p class="failure hidden"></p>
<p class="success hidden">
Félicitations ! Le plateau de la certif est maintenant comme neuf ! 🎉
Vous pouvez être fier de vous !
</p>
<script src="assets/jeu.js" type="application/javascript"></script>
<script src="assets/nature.js" type="application/javascript"></script>
<footer>
<p>
Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.
</p>
</footer>
</body>
</html>