Compare commits
No commits in common. "3705189f91d36c693d38ad9f35f971d3355b8152" and "e937e76ad06532d815d083e8a7ffb226ce22ea48" have entirely different histories.
3705189f91
...
e937e76ad0
2 changed files with 19 additions and 46 deletions
|
@ -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();
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue