diff --git a/TP03/EX02/js/memory.js b/TP03/EX02/js/memory.js index 70b786d..c0f6df1 100644 --- a/TP03/EX02/js/memory.js +++ b/TP03/EX02/js/memory.js @@ -1 +1,117 @@ -// TODO +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; +} \ No newline at end of file diff --git a/TP03/EX02/memory.html b/TP03/EX02/memory.html index 9595776..9c4c12f 100644 --- a/TP03/EX02/memory.html +++ b/TP03/EX02/memory.html @@ -23,16 +23,37 @@ + + +
+ + + +
+
+ +
+
+ + + + +
+
+ + + +