117 lines
2.5 KiB
JavaScript
117 lines
2.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', chargementPage);
|
|
var listeAmpouleView;
|
|
var conteneurJeu;
|
|
var perduView;
|
|
var gagneView;
|
|
var btnStart;
|
|
var scoreView;
|
|
|
|
var listeEtatAmpouleInitiale = [];
|
|
var listeEtatAmpoule = [];
|
|
var ALLUMEE = 1;
|
|
var ETEINTE = 0;
|
|
var url = ["./images/off.png", "./images/on.png"];
|
|
var tempsDebut = 1000;
|
|
var isGameStart = false;
|
|
var isPlaying = false;
|
|
var score;
|
|
var scoreMax;
|
|
|
|
|
|
function chargementPage(event){
|
|
conteneurJeu = document.getElementsByClassName('columns')[1];
|
|
listeAmpouleView = document.querySelectorAll('img');
|
|
perduView = document.getElementById("perdu");
|
|
gagneView = document.getElementById("gagne");
|
|
btnStart = document.querySelector('button');
|
|
scoreView = document.querySelector('progress');
|
|
|
|
conteneurJeu.addEventListener('click', clicAmpoule);
|
|
btnStart.addEventListener('click', start);
|
|
}
|
|
|
|
function clicAmpoule(event){
|
|
if (event.target.tagName === 'IMG' && isPlaying && event.target.src !== url[ALLUMEE]){
|
|
var index = findIndex(listeAmpouleView, event.target);
|
|
listeEtatAmpoule[index] = ALLUMEE;
|
|
if (listeEtatAmpoule[index] !== listeEtatAmpouleInitiale[index]){
|
|
perdu();
|
|
}
|
|
else{
|
|
event.target.src = url[ALLUMEE];
|
|
score ++;
|
|
scoreView.value = score;
|
|
if (score >= scoreMax){
|
|
gagne();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function allumerAleatoire(proba=0.25){
|
|
listeAmpouleView.forEach(function(image, index) {
|
|
if (Math.random() <= proba){
|
|
image.src = url[ALLUMEE];
|
|
listeEtatAmpouleInitiale[index] = ALLUMEE;
|
|
scoreMax ++;
|
|
}
|
|
else{
|
|
listeEtatAmpouleInitiale[index] = ETEINTE;
|
|
}
|
|
})
|
|
scoreView.max = scoreMax;
|
|
scoreView.value = 0;
|
|
}
|
|
|
|
function eteindre(){
|
|
listeAmpouleView.forEach(function(image, index) {
|
|
image.src = url[ETEINTE];
|
|
listeEtatAmpoule[index] = 0;
|
|
})
|
|
}
|
|
|
|
function start(){
|
|
if (!isGameStart && !isPlaying){
|
|
isGameStart = true;
|
|
isPlaying = false;
|
|
score = 0;
|
|
scoreMax = 0;
|
|
perduView.style.display = "none";
|
|
gagneView.style.display = "none";
|
|
eteindre();
|
|
allumerAleatoire(0.4);
|
|
setTimeout(jouer, tempsDebut);
|
|
}
|
|
}
|
|
|
|
function jouer(){
|
|
isGameStart = false;
|
|
isPlaying = true;
|
|
eteindre();
|
|
}
|
|
|
|
function perdu(){
|
|
perduView.style.display = "block";
|
|
isPlaying = false;
|
|
setTimeout(perdu2, tempsDebut)
|
|
}
|
|
|
|
function perdu2(){
|
|
listeAmpouleView.forEach(function(image, index) {
|
|
image.src = url[listeEtatAmpouleInitiale[index]];
|
|
})
|
|
}
|
|
|
|
function gagne(){
|
|
gagneView.style.display = "block";
|
|
isPlaying = false;
|
|
}
|
|
|
|
function findIndex(tableau, element){
|
|
for (var i = 0; i < tableau.length; i++) {
|
|
if (tableau[i] === element) {
|
|
return i;
|
|
}
|
|
}
|
|
return null;
|
|
} |