wamster/JS
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

TP03_EX02

Browse Source
This commit is contained in:
Alex Wamster 2024-02-27 09:48:26 +01:00
parent 2cfb5211c3
commit 0d2bffb2a0
2 changed files with 138 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
TP03/EX02/js/memory.js
View File

@ -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;
}

21
TP03/EX02/memory.html
View File

@ -23,16 +23,37 @@
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div>
<div class="column">
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div> </div>
<div class="column"> <div class="column">
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div> </div>
<div class="column"> <div class="column">
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" /> <img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div>
<div class="column">
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div>
<div class="column">
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div> </div>
</div> </div>