display score

This commit is contained in:
Gabriel Augendre 2024-01-23 00:19:54 +01:00
parent 5c8f65c104
commit 3f36a21f25
3 changed files with 14 additions and 10 deletions

View file

@ -14,6 +14,8 @@ let timeBetween = 2000;
const MIN_TIME_BETWEEN = 1000; const MIN_TIME_BETWEEN = 1000;
const ACCELERATION = 100; const ACCELERATION = 100;
let score = 0;
(function () { (function () {
zones = document.getElementsByClassName("zone"); zones = document.getElementsByClassName("zone");
for (const zone of zones) { for (const zone of zones) {
@ -21,7 +23,6 @@ const ACCELERATION = 100;
if (gameState !== GAME_STARTED) { if (gameState !== GAME_STARTED) {
return; return;
} }
console.log(event.target.classList);
if (event.target.classList.contains("inactive")) { if (event.target.classList.contains("inactive")) {
gameState = GAME_LOST; gameState = GAME_LOST;
end(); end();
@ -29,13 +30,13 @@ const ACCELERATION = 100;
event.target.style.transition = ""; event.target.style.transition = "";
event.target.classList.remove("fade-out"); event.target.classList.remove("fade-out");
event.target.classList.add("inactive"); event.target.classList.add("inactive");
increment();
} }
}) })
} }
})(); })();
function start() { function start() {
console.log("start!");
document.getElementsByTagName("button")[0].disabled = true; document.getElementsByTagName("button")[0].disabled = true;
gameState = GAME_STARTED; gameState = GAME_STARTED;
endTimeout = setTimeout(end, 30_000); endTimeout = setTimeout(end, 30_000);
@ -51,9 +52,7 @@ function round() {
let zone = zones[Math.floor(Math.random() * zones.length)]; let zone = zones[Math.floor(Math.random() * zones.length)];
zone.classList.remove("inactive"); zone.classList.remove("inactive");
setTimeout(function () { setTimeout(function () {
zone.style.transition = `background-color ${timeBetween}ms`; zone.style.transition = `background-color ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms`;
}, 100);
setTimeout(function () {
zone.classList.add("fade-out"); zone.classList.add("fade-out");
}, MIN_TIME_BETWEEN / 2); }, MIN_TIME_BETWEEN / 2);
let zoneTimeout = setTimeout(() => { let zoneTimeout = setTimeout(() => {
@ -81,3 +80,8 @@ function end() {
document.getElementsByClassName("failure stamp")[0].classList.remove("hidden"); document.getElementsByClassName("failure stamp")[0].classList.remove("hidden");
} }
} }
function increment() {
score++;
document.getElementById("score").innerText = score.toString();
}

View file

@ -38,17 +38,16 @@ main, footer {
} }
.success.stamp { .success.stamp {
top: 120px; top: 110px;
left: 60px; left: 85px;
color: #0f5132; color: #0f5132;
background-color: #d1e7dd; background-color: #d1e7dd;
border: 3px solid #859a99; border: 3px solid #859a99;
} }
.failure.stamp { .failure.stamp {
/* TODO center the stamp */ top: 110px;
top: 120px; left: 200px;
left: 60px;
color: #510f0f; color: #510f0f;
background-color: #e7d1d1; background-color: #e7d1d1;
border: 3px solid #9a8585; border: 3px solid #9a8585;

View file

@ -23,6 +23,7 @@
<h2>Jeu interactif</h2> <h2>Jeu interactif</h2>
<p> <p>
Aide Pimpin le technicien à reboucher les fuites ! <br> Aide Pimpin le technicien à reboucher les fuites ! <br>
Score : <span id="score">0</span> <br>
<button onclick="start()">Commencer</button> <button onclick="start()">Commencer</button>
</p> </p>
<div class="img-holder"> <div class="img-holder">