Compare commits

..

No commits in common. "3705189f91d36c693d38ad9f35f971d3355b8152" and "e937e76ad06532d815d083e8a7ffb226ce22ea48" have entirely different histories.

2 changed files with 19 additions and 46 deletions

View file

@ -4,39 +4,29 @@ const GAME_NOT_STARTED = 0;
const GAME_STARTED = 1; const GAME_STARTED = 1;
const GAME_WON = 2; const GAME_WON = 2;
const GAME_LOST = 3; const GAME_LOST = 3;
const CHEAT = false;
let gameState = GAME_NOT_STARTED; let gameState = GAME_NOT_STARTED;
let zones = undefined; let zones = undefined;
let timer = undefined;
let endTimeout = undefined; let endTimeout = undefined;
let roundTimeout = undefined; let roundTimeout = undefined;
let timerInterval = undefined;
let timeBetween = 2000; let timeBetween = 2000;
const MIN_TIME_BETWEEN = 1000; const MIN_TIME_BETWEEN = 1000;
const ACCELERATION = 100; const ACCELERATION = 100;
const DURATION = 60_500;
let score = 0; let score = 0;
let zonesCleared = 0;
let startTime = undefined;
function start() {
document.getElementsByTagName("button")[0].disabled = true;
gameState = GAME_STARTED;
startTime = new Date();
timer = document.getElementById("timer");
(function () {
zones = document.getElementsByClassName("zone"); zones = document.getElementsByClassName("zone");
for (const zone of zones) { for (const zone of zones) {
zone.addEventListener("click", event => { zone.addEventListener("click", event => {
if (gameState !== GAME_STARTED) { if (gameState !== GAME_STARTED) {
return; return;
} }
if (!event.target.classList.contains("inactive")) { if (event.target.classList.contains("inactive")) {
gameState = GAME_LOST;
end();
} else {
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");
@ -44,17 +34,15 @@ function start() {
} }
}) })
} }
})();
endTimeout = setTimeout(end, DURATION); function start() {
timerInterval = setInterval(updateTimer, 500); document.getElementsByTagName("button")[0].disabled = true;
gameState = GAME_STARTED;
endTimeout = setTimeout(end, 30_000);
roundTimeout = setTimeout(round, 1); roundTimeout = setTimeout(round, 1);
} }
function updateTimer() {
const now = new Date();
timer.innerText = Math.floor(Math.abs(startTime - now) / 1000).toString();
}
function round() { function round() {
if (gameState !== GAME_STARTED) { if (gameState !== GAME_STARTED) {
end(); end();
@ -62,25 +50,15 @@ 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", "fade-out");
if (CHEAT) {
setTimeout(() => {
zone.click();
}, 200);
}
setTimeout(function() { setTimeout(function() {
zone.style.transition = `opacity ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms linear`; zone.style.transition = `opacity ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms`;
}, 100); }, 100);
setTimeout(function () { 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(() => {
if (!zone.classList.contains("inactive") && gameState === GAME_STARTED) { if (!zone.classList.contains("inactive")) {
console.log("lost because didn't click fast enough", zone.id); console.log("lost because didn't click fast enough", zone.id);
gameState = GAME_LOST; gameState = GAME_LOST;
end(); end();
@ -88,7 +66,7 @@ function round() {
}, timeBetween); }, timeBetween);
zone.addEventListener("click", () => {clearTimeout(zoneTimeout)}) zone.addEventListener("click", () => {clearTimeout(zoneTimeout)})
// Recursive call, sorta // Recursive call
timeBetween -= ACCELERATION; timeBetween -= ACCELERATION;
if (timeBetween <= MIN_TIME_BETWEEN) {timeBetween = MIN_TIME_BETWEEN;} if (timeBetween <= MIN_TIME_BETWEEN) {timeBetween = MIN_TIME_BETWEEN;}
roundTimeout = setTimeout(round, timeBetween); roundTimeout = setTimeout(round, timeBetween);
@ -97,7 +75,6 @@ function round() {
function end() { function end() {
clearTimeout(roundTimeout); clearTimeout(roundTimeout);
clearTimeout(endTimeout); clearTimeout(endTimeout);
clearInterval(timerInterval);
if (gameState === GAME_STARTED) { if (gameState === GAME_STARTED) {
gameState = GAME_WON; gameState = GAME_WON;
document.getElementsByClassName("success stamp")[0].classList.remove("hidden"); document.getElementsByClassName("success stamp")[0].classList.remove("hidden");
@ -107,8 +84,6 @@ function end() {
} }
function increment() { function increment() {
score += Math.floor(Math.random() * zones.length) + 1; score += Math.floor(Math.random() * zones.length);
zonesCleared++;
document.getElementById("score").innerText = score.toString(); document.getElementById("score").innerText = score.toString();
document.getElementById("zonesCount").innerText = zonesCleared.toString();
} }

View file

@ -22,9 +22,8 @@
<main> <main>
<h2>Jeu interactif</h2> <h2>Jeu interactif</h2>
<p> <p>
Tu as <strong>une minute</strong> pour aider Pimpin le technicien à reboucher les fuites de fluide frigorigène ! <br> Aide Pimpin le technicien à reboucher les fuites de fluide frigorigène ! <br>
Score : <span id="score">0</span> kg CO<sub>2</sub>e non rejetés dans l'atmosphère (<span id="zonesCount">0</span> fuites).<br> Score : <span id="score">0</span> kg CO<sub>2</sub>e non rejetés dans l'atmosphère<br>
Temps écoulé : <span id="timer">0</span>s.
<button onclick="start()">Commencer</button> <button onclick="start()">Commencer</button>
</p> </p>
<div class="img-holder"> <div class="img-holder">
@ -44,7 +43,6 @@
<span class="success stamp hidden">FÉLICITATIONS 🎉</span> <span class="success stamp hidden">FÉLICITATIONS 🎉</span>
<span class="failure stamp hidden">PERDU 😞</span> <span class="failure stamp hidden">PERDU 😞</span>
</div> </div>
<p>N'hésite pas à partager ton score sur Teams 😉</p>
</main> </main>
<footer> <footer>
<p> <p>
@ -54,7 +52,7 @@
</p> </p>
</footer> </footer>
<script src="assets/jeu.js"></script> <script src="assets/jeu.js"></script>
<script data-goatcounter="https://static.gc.augendre.info/count" <!--<script data-goatcounter="https://static.gc.augendre.info/count"-->
async src="https://static.gc.augendre.info/count.js"></script> <!-- async src="https://static.gc.augendre.info/count.js"></script>-->
</body> </body>
</html> </html>