Merge branch 'main' of https://git.etud.insa-toulouse.fr/bocquel/Projet_JS

commit

demineur.html

@@ -56,10 +56,14 @@
         <br>
         <label for="largeur">Largeur:</label>
         <input type="number" id="largeur" value="7">
+
+        <label for="nombre_mines">Nombre de mines:</label>
+        <input type="number" id="nombre_mines" value="10">
         <br>
-        <label for="number_mines">Nombre de mines:</label>
+        <label for="nombre_mines">Nombre de mines:</label>
-        <input type="number" id="number_mines" value="10">
+        <input type="number" id="nombre_mines" value="10">
         <br><br>
+	
         <button id="save-options">Sauvegarder</button>
         <button id="close-options">Fermer</button>
     </div>

demineur.js

@@ -1,21 +1,26 @@
+//Initialisation des constantes
+
 let grille = [];
 let hauteur = 7;
 let largeur = 7;
-let number_mines = 10 ;
+let nombre_mines = 10 ;
-let first_click = true ;
+let premier_click = true ;
 let arret=0;
-let cases_restantes = hauteur*largeur - number_mines ;
+let cases_restantes = hauteur*largeur - nombre_mines ;
+
+//Assignation de leurs fonctions aux différents boutons
 
 function gererOptions() {
     const newHauteur = parseInt(document.getElementById('hauteur').value);
     const newLargeur = parseInt(document.getElementById('largeur').value);
-    const newNumberMines = parseInt(document.getElementById('number_mines').value);
+    const newNumberMines = parseInt(document.getElementById('nombre_mines').value);
 
     if (newHauteur > 12 || newLargeur > 12) {
         alert("Les dimensions ne doivent pas dépasser 12x12.");
         return;
     }
 
+
     const maxMines = newHauteur * newLargeur - 1;
     if (newNumberMines < 1 || newNumberMines > maxMines) {
         alert(`Le nombre de mines doit être entre 1 et ${maxMines}.`);
@@ -24,7 +29,8 @@ function gererOptions() {
 
     hauteur = newHauteur;
     largeur = newLargeur;
-    number_mines = newNumberMines;
+    nombre_mines = newNumberMines;
+
     document.getElementById('options-popup').classList.remove('show');
     resetJeu();
 }
@@ -47,7 +53,8 @@ document.getElementById('save-options').removeEventListener('click', gererOption
 document.getElementById("fin_game").addEventListener("click", resetJeu) ;
 
 
-function getRandomInt(maxi) {
+
+function entierRandom(maxi) { //fonction pour obtenir un entier aléatoire entre 0 et maxi
     return Math.floor(Math.random() * maxi);
 }
 
@@ -71,7 +78,7 @@ function jeuFini() {
     return true; // Toutes les conditions sont remplies
 }
 
-function MontrerMines() {
+function MontrerMines() { //fonction pour révéler 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) {
@@ -83,7 +90,7 @@ function MontrerMines() {
     }
 }
 
-function creerGrille(haut, larg, mine_nb, x_first, y_first) {
+function creerGrille(haut, larg, mine_nb, x_premier, y_premier) {
     grille.length = haut;
     for (var i = 0; i < haut; i++) {
         grille[i] = Array(larg);
@@ -93,17 +100,17 @@ function creerGrille(haut, larg, mine_nb, x_first, y_first) {
     }
 
     for (var k = 0; k < mine_nb; k++) {
-        let new_x = getRandomInt(larg);
+        let nouv_x = entierRandom(larg);
-        let new_y = getRandomInt(haut);
+        let nouv_y = entierRandom(haut);
 
-        while (grille[new_y][new_x] == 9 || (new_y == y_first && new_x == x_first)) {
+        while (grille[nouv_y][nouv_x] == 9 || (nouv_y == y_premier && nouv_x == x_premier)) {
-            new_x = getRandomInt(larg);
+            nouv_x = entierRandom(larg);
-            new_y = getRandomInt(haut);
+            nouv_y = entierRandom(haut);
         }
 
-        grille[new_y][new_x] = 9;
+        grille[nouv_y][nouv_x] = 9;
-        for (var m = Math.max(0, new_y - 1); m < Math.min(haut, new_y + 2); m++) {
+        for (var m = Math.max(0, nouv_y - 1); m < Math.min(haut, nouv_y + 2); m++) {
-            for (var n = Math.max(0, new_x - 1); n < Math.min(larg, new_x + 2); n++) {
+            for (var n = Math.max(0, nouv_x - 1); n < Math.min(larg, nouv_x + 2); n++) {
                 if (grille[m][n] != 9) {
                     grille[m][n]++;
                 }
@@ -190,9 +197,9 @@ function selectImage(idCase) {
     const y = parseInt(coords[0]) ;
     const x = parseInt(coords[1]) ;
 
-    if (first_click) {
+    if (premier_click) {
-	creerGrille(hauteur,largeur,number_mines,x,y) ;
+	creerGrille(hauteur,largeur,nombre_mines,x,y) ;
-	first_click = false ;
+	premier_click = false ;
 	chrono() ;
     }
 
@@ -238,13 +245,11 @@ function resetJeu() {
     const divJeu = document.getElementById("jeu") ;
     divJeu.removeChild(divJeu.children[0]) ;
     grilleButtons(hauteur, largeur) ;
-    cases_restantes = hauteur*largeur - number_mines ;
+    cases_restantes = hauteur*largeur - nombre_mines ;
     arret = 1 ;
-    first_click = true ;
+    premier_click = true ;	
-	
     document.getElementById("temps").value=0;   
    
-    
 }
 
 
@@ -284,15 +289,15 @@ function grilleButtons(haut, larg) {
 
     for (var i=0;i<haut;i++) {
 	for (var j=0;j<larg;j++){
-	    var newCase = document.createElement("BUTTON") ;
+	    var nouvCase = document.createElement("BUTTON") ;
-	    newCase.style.gridRow=(i+1).toString() ;
+	    nouvCase.style.gridRow=(i+1).toString() ;
-	    newCase.style.gridColumn = (j+1).toString() ;
+	    nouvCase.style.gridColumn = (j+1).toString() ;
-	    newCase.classList.add("button_case") ;
+	    nouvCase.classList.add("button_case") ;
-	    newCase.id = i.toString() + "_" + j.toString() ;
+	    nouvCase.id = i.toString() + "_" + j.toString() ;
-	    newCase.style.background="url('case_vide.png')" ;
+	    nouvCase.style.background="url('case_vide.png')" ;
-	    newCase.addEventListener("click", changeImageClick);
+	    nouvCase.addEventListener("click", changeImageClick);
-	    newCase.addEventListener("contextmenu", changeImageFlag);
+	    nouvCase.addEventListener("contextmenu", changeImageFlag);
-	    divGrille.appendChild(newCase) ;
+	    divGrille.appendChild(nouvCase) ;
 	    
 	}
     }        

main.css

@@ -10,11 +10,10 @@ body {
     align-items: center;
     height: 100vh;
     text-align: center;
+    overflow:hidden;
 }
 
 
-
-
 .container {
     text-align: center;
     max-width: 600px;
@@ -39,7 +38,7 @@ header h1 {
 
 .welcome-image {
     width: 80%;
-    max-width: 400px;
+    max-width: 70px;
     margin: 20px auto;
     display: block;
     border-radius: 8px;
@@ -47,6 +46,7 @@ header h1 {
 }
 
 
+
 button {
     padding: 15px 30px;
     font-size: 18px;
@@ -55,10 +55,15 @@ button {
     background-color: #007BFF;
     border: none;
     border-radius: 8px;
+    text-transform: uppercase;
     cursor: pointer;
-    transition: background-color 0.3s, transform 0.2s;
+    /*transition: background-color 0.3s, transform 0.2s;*/
+
+    
 }
-    transform: scale(1.05);
+button:hover {
+    background-color: #d3e017; 
+    transform: scale(1.1);
 } 
 
 

main.html

@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="main.css">
 </head>
 <body>
+    
+    <div class="emoji-background"></div>
+       
     <div class="container">
         <header>
             <img src="logo.png" alt="Logo du Démineur" class="logo">
@@ -14,7 +17,7 @@
         </header>
         <main>
             <p>Préparez-vous à une expérience de jeu inoubliable ! Cliquez sur le bouton ci-dessous pour commencer votre aventure.</p>
-            <img src="welcome-image.png" alt="Image de bienvenue" class="welcome-image">
+            <img src="smile.png" alt="Image de bienvenue" class="welcome-image">
             <button id="play-button">JOUER</button>
         </main>
         <footer>
@@ -22,10 +25,12 @@
         </footer>
     </div>
 
+    
     <script>
         document.getElementById('play-button').addEventListener('click', () => {
-            window.location.href = 'game.html';
+            window.location.href = 'demineur.html';
         });
+
     </script>
 </body>
 </html>