diff --git a/potain05/assets/jeu.js b/potain05/assets/jeu.js index 33d579d..4f066f9 100644 --- a/potain05/assets/jeu.js +++ b/potain05/assets/jeu.js @@ -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(); +} diff --git a/potain05/assets/style.css b/potain05/assets/style.css index 546ac4d..360a11f 100644 --- a/potain05/assets/style.css +++ b/potain05/assets/style.css @@ -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; diff --git a/potain05/index.html b/potain05/index.html index 55930ea..877b2c3 100644 --- a/potain05/index.html +++ b/potain05/index.html @@ -23,6 +23,7 @@

Jeu interactif

Aide Pimpin le technicien à reboucher les fuites !
+ Score : 0