display score
This commit is contained in:
parent
5c8f65c104
commit
3f36a21f25
3 changed files with 14 additions and 10 deletions
|
@ -14,6 +14,8 @@ let timeBetween = 2000;
|
|||
const MIN_TIME_BETWEEN = 1000;
|
||||
const ACCELERATION = 100;
|
||||
|
||||
let score = 0;
|
||||
|
||||
(function () {
|
||||
zones = document.getElementsByClassName("zone");
|
||||
for (const zone of zones) {
|
||||
|
@ -21,7 +23,6 @@ const ACCELERATION = 100;
|
|||
if (gameState !== GAME_STARTED) {
|
||||
return;
|
||||
}
|
||||
console.log(event.target.classList);
|
||||
if (event.target.classList.contains("inactive")) {
|
||||
gameState = GAME_LOST;
|
||||
end();
|
||||
|
@ -29,13 +30,13 @@ const ACCELERATION = 100;
|
|||
event.target.style.transition = "";
|
||||
event.target.classList.remove("fade-out");
|
||||
event.target.classList.add("inactive");
|
||||
increment();
|
||||
}
|
||||
})
|
||||
}
|
||||
})();
|
||||
|
||||
function start() {
|
||||
console.log("start!");
|
||||
document.getElementsByTagName("button")[0].disabled = true;
|
||||
gameState = GAME_STARTED;
|
||||
endTimeout = setTimeout(end, 30_000);
|
||||
|
@ -51,9 +52,7 @@ function round() {
|
|||
let zone = zones[Math.floor(Math.random() * zones.length)];
|
||||
zone.classList.remove("inactive");
|
||||
setTimeout(function () {
|
||||
zone.style.transition = `background-color ${timeBetween}ms`;
|
||||
}, 100);
|
||||
setTimeout(function () {
|
||||
zone.style.transition = `background-color ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms`;
|
||||
zone.classList.add("fade-out");
|
||||
}, MIN_TIME_BETWEEN / 2);
|
||||
let zoneTimeout = setTimeout(() => {
|
||||
|
@ -81,3 +80,8 @@ function end() {
|
|||
document.getElementsByClassName("failure stamp")[0].classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function increment() {
|
||||
score++;
|
||||
document.getElementById("score").innerText = score.toString();
|
||||
}
|
||||
|
|
|
@ -38,17 +38,16 @@ main, footer {
|
|||
}
|
||||
|
||||
.success.stamp {
|
||||
top: 120px;
|
||||
left: 60px;
|
||||
top: 110px;
|
||||
left: 85px;
|
||||
color: #0f5132;
|
||||
background-color: #d1e7dd;
|
||||
border: 3px solid #859a99;
|
||||
}
|
||||
|
||||
.failure.stamp {
|
||||
/* TODO center the stamp */
|
||||
top: 120px;
|
||||
left: 60px;
|
||||
top: 110px;
|
||||
left: 200px;
|
||||
color: #510f0f;
|
||||
background-color: #e7d1d1;
|
||||
border: 3px solid #9a8585;
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
<h2>Jeu interactif</h2>
|
||||
<p>
|
||||
Aide Pimpin le technicien à reboucher les fuites ! <br>
|
||||
Score : <span id="score">0</span> <br>
|
||||
<button onclick="start()">Commencer</button>
|
||||
</p>
|
||||
<div class="img-holder">
|
||||
|
|
Loading…
Reference in a new issue