From 473b165e853033f45d8ba969fc1b2f3e02e184a7 Mon Sep 17 00:00:00 2001 From: Bocquel Raphael Date: Thu, 2 Jan 2025 14:34:48 +0100 Subject: [PATCH] cleanup et doc --- demineur.js | 144 +++++++++++++++++++++++++++------------------------- 1 file changed, 75 insertions(+), 69 deletions(-) diff --git a/demineur.js b/demineur.js index 2419621..978c8c2 100644 --- a/demineur.js +++ b/demineur.js @@ -1,16 +1,17 @@ -//Initialisation des constantes +//Initialisation des variables globales -let grille = []; -let hauteur = 7; -let largeur = 7; -let nombre_mines = 10 ; -let premier_click = true ; -let arret=0; -let cases_restantes = hauteur*largeur - nombre_mines ; +let grille = []; //matrice contenant les emplacements des mines et le nombre de mines adjacentes à chaque case +let hauteur = 7; //première dimension de grille +let largeur = 7; //deuxième dimension de grille +let nombre_mines = 10 ; //nombre de mines dans grille +let premier_click = true ; //indique si la partie est déjà commencée ou non +let arret=0; //indique si une partie est en cours ou non +let cases_restantes = hauteur*largeur - nombre_mines ; //nombre de cases à révéler pour gagner la partie -//Assignation de leurs fonctions aux différents boutons function gererOptions() { + //Lors de la sauvegarde des options, vérifie que les dimensions et le nombre de mines entrés par l'utilisateur sont acceptables, met à jour les varaibles globales appropriées et redémarre la partie + const newHauteur = parseInt(document.getElementById('hauteur').value); const newLargeur = parseInt(document.getElementById('largeur').value); const newNumberMines = parseInt(document.getElementById('nombre_mines').value); @@ -36,6 +37,7 @@ function gererOptions() { } function options() { + //Lors d'un click sur le bouton Options, affiche le popup permettant de changer les options et active les boutons document.getElementById("options-popup").classList.add("show"); document.getElementById('close-options').addEventListener('click', () => { @@ -50,35 +52,15 @@ function options() { document.getElementById('save-options').removeEventListener('click', gererOptions); -document.getElementById("fin_game").addEventListener("click", resetJeu) ; - -function entierRandom(maxi) { //fonction pour obtenir un entier aléatoire entre 0 et maxi +function entierRandom(maxi) { //renvoie un entier aléatoire entre 0 et maxi return Math.floor(Math.random() * maxi); } -function jeuFini() { - for (let i = 0; i < hauteur; i++) { - for (let j = 0; j < largeur; j++) { - const caseElement = document.getElementById(i + "_" + j); - const caseData = grille[i][j]; - if (caseData === 9) { // Case contenant une mine - if (!caseElement.classList.contains("buttonFlagged")) { - return false; // Une mine n'est pas marquée - } - } else { // Case ne contenant pas de mine - if (!caseElement.classList.contains("buttonRevealed")) { - return false; // Une case non-mine n'est pas révélée - } - } - } - } - return true; // Toutes les conditions sont remplies -} -function MontrerMines() { //fonction pour révéler toutes les mines sur le plateau après un essai raté +function MontrerMines() { //révèle toutes les mines sur le plateau après un essai raté for (let i = 0; i < hauteur; i++) { for (let j = 0; j < largeur; j++) { if (grille[i][j] === 9) { @@ -91,15 +73,19 @@ function MontrerMines() { //fonction pour révéler toutes les mines sur le plat } function creerGrille(haut, larg, mine_nb, x_premier, y_premier) { + //(Ré)initialise la variable globale grille pour qu'elle contienne une matrice d'entiers de dimensions hautxlarg contenant mine_nb mines (représentées par des 9) avec les autres cases contenant le nombre de mines dans les cases adjacentes. + //La case de position (x_premier, y_premier) ne peut pas contenir de mines. + //Les positions des mines sont aléatoires + grille.length = haut; - for (var i = 0; i < haut; i++) { + for (var i = 0; i < haut; i++) { //dimensionnement et mise à 0 de grille grille[i] = Array(larg); for (var j = 0; j < larg; j++) { grille[i][j] = 0; } } - for (var k = 0; k < mine_nb; k++) { + for (var k = 0; k < mine_nb; k++) { //placement des mines let nouv_x = entierRandom(larg); let nouv_y = entierRandom(haut); @@ -109,6 +95,8 @@ function creerGrille(haut, larg, mine_nb, x_premier, y_premier) { } grille[nouv_y][nouv_x] = 9; + + //incrémentation des cases adjacentes à la mine for (var m = Math.max(0, nouv_y - 1); m < Math.min(haut, nouv_y + 2); m++) { for (var n = Math.max(0, nouv_x - 1); n < Math.min(larg, nouv_x + 2); n++) { if (grille[m][n] != 9) { @@ -131,10 +119,10 @@ function getCookie(name) { } -function sleep(ms){ +function sleep(ms){ //prend ms millisecondes à se résoudre return new Promise(resolve => setTimeout(resolve, ms)); } -async function chrono(){ +async function chrono(){ //incrémente de 1 la valeur Temps affichée en haut de la page toutes les 1000ms jusqu'à ce que la variable arret soit mise à 1 let k=document.getElementById("temps").value; const myButton = document.getElementById("fin_game"); arret = 0 ; @@ -146,14 +134,10 @@ async function chrono(){ } } - } - - - // Fonction pour créer un cookie function setCookie(name, value, days) { const expires = new Date(Date.now() + days * 864e5).toUTCString(); @@ -165,8 +149,9 @@ function getCookie(name) { return document.cookie.split('; ').find(row => row.startsWith(name + '='))?.split('=')[1]; } - -function cookie(){ + +function cookie(){ //crée le popup qui questionne l'utilisateur sur son choix de cookie + const popup = document.getElementById('cookies-popup'); const close_popup_button = document.getElementById('accept-button'); const keep_popup_button = document.getElementById('refuse-button'); @@ -186,30 +171,30 @@ function cookie(){ } -const cookieAccepted = getCookie('cookiesAccepted'); -if (!cookieAccepted){ - cookie(); -} - -function selectImage(idCase) { +function selectImage(idCase) { //détermine l'image à affecter à la case d'id idCase et effectue les opérations annexes à la révélation de la case + + //détermine la position dans grille correspondant à la case d'id idCase const coords = idCase.split("_") ; const y = parseInt(coords[0]) ; const x = parseInt(coords[1]) ; + //si la partie n'était pas encore commencée, initialise grille avec les positions des mines et les nombres dans les autres cases et démarre le chrono if (premier_click) { creerGrille(hauteur,largeur,nombre_mines,x,y) ; premier_click = false ; chrono() ; } + //si la case révélée était une mine, arrête la partie et affiche un message de perte if (grille[y][x] === 9 && arret == 0) { arret = 1; const time = document.getElementById("temps").value; alert(`Vous avez perdu ! Temps passé : ${time} secondes.`); MontrerMines(); } - + + //si la case révélée n'est adjacente à aucune mine, révèle également les cases adjacentes if (grille[y][x] == 0) { for (var m = Math.max(0, y - 1); m < Math.min(hauteur, y + 2); m++) { for (var n = Math.max(0, x - 1); n < Math.min(largeur, x + 2); n++) { @@ -220,42 +205,35 @@ function selectImage(idCase) { } } } - + + //renvoie le nom de fichier de l'image à afficher dans la case en fonction du contenu de grille à la même position return("url('case_" + grille[y][x].toString() + ".png')"); } -function changeImage(targetCase) { - if (!(targetCase.classList.contains("buttonFlagged"))) { - targetCase.classList.add("buttonRevealed") ; - targetCase.style.background= selectImage(targetCase.id) ; +function changeImage(caseCible) { + //Change l'image d'une case caseCible et appelle selectImage sur l'id de cette case. + //Si c'est la dernière case ne contenant pas de mine, arrete la partie et affiche un message de victoire + + if (!(caseCible.classList.contains("buttonFlagged"))) { + caseCible.classList.add("buttonRevealed") ; + caseCible.style.background= selectImage(caseCible.id) ; cases_restantes = cases_restantes - 1 ; + //Test de victoire if (cases_restantes == 0 && arret == 0) { arret = 1 ; - const time = document.getElementById("temps").value; - alert(`Félicitations ! Vous avez gagné ! Temps passé : ${time} secondes.`); + const time = document.getElementById("temps").value; + alert(`Félicitations ! Vous avez gagné ! Temps passé : ${time} secondes.`); } } } -function resetJeu() { - - const divJeu = document.getElementById("jeu") ; - divJeu.removeChild(divJeu.children[0]) ; - grilleButtons(hauteur, largeur) ; - cases_restantes = hauteur*largeur - nombre_mines ; - arret = 1 ; - premier_click = true ; - document.getElementById("temps").value=0; - -} - -function changeImageClick(mouseEvent) { +function changeImageClick(mouseEvent) { //Lors d'un évènement click sur la case ciblée par mouseEvent, si elle n'est pas déjà révélée, la révèle if (!(mouseEvent.target.classList.contains("buttonRevealed"))) { changeImage(mouseEvent.target) ; } @@ -263,6 +241,8 @@ function changeImageClick(mouseEvent) { function changeImageFlag(rightClick) { + //Lors d'un évènement click droit rightClick sur une case, change l'image de la cible de rightClick pour y mettre un drapeau et change ses classes pour empêhcer de la révéler avec un clic gauche. + //Si la case a déjà un drapeau, l'opération inverse est effectuée. rightClick.preventDefault() ; if (rightClick.target.classList.contains("buttonRevealed")) { @@ -276,7 +256,24 @@ function changeImageFlag(rightClick) { } } + +function resetJeu() { //supprime la grille actuelle, arrête la partie, recrée une grille et remet les variables globales appropriées à leurs valeurs initiales + + const divJeu = document.getElementById("jeu") ; + divJeu.removeChild(divJeu.children[0]) ; + grilleButtons(hauteur, largeur) ; + cases_restantes = hauteur*largeur - nombre_mines ; + arret = 1 ; + premier_click = true ; + document.getElementById("temps").value=0; + +} + + function grilleButtons(haut, larg) { + + //crée dans la div jeu une div grille de type grid et de dimensions haut par larg + //et y ajoute les boutons représentant les cases du jeu de démineur en les liants aux fonctions adéquates const divJeu = document.getElementById("jeu") ; var divGrille = document.createElement("DIV") ; @@ -289,8 +286,9 @@ function grilleButtons(haut, larg) { divGrille.style.gridTemplateRows = taille_rows ; divJeu.appendChild(divGrille) ; - for (var i=0;i