correction du jeu

demineur.html

@@ -49,41 +49,6 @@
 </div>
 </body>
 <footer>
-    <!-- confettis( bonus) -->
+    <p>© 2024 - Tous droits réservés - Le Démineur</p>
-    <!-- HTML -->
-    <button id="btn">Essayez-moi !</button>
-    <canvas id="confetti-canvas"></canvas>
-    
-    <!-- JS -->
-    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
-    <script type="text/javascript">
-      const btn = document.querySelector('#btn');
-      const canvas = document.querySelector('#confetti-canvas');
-      function onButtonClick(){
-        var myConfetti = confetti.create(canvas, {
-          resize: true,
-          useWorker: true
-        });
-        myConfetti({
-          particleCount: 100,
-          spread: 160
-        });
-      }
-      btn.addEventListener('click', onButtonClick);
-    </script>
-    
-    <!-- CSS -->
-    <style>
-    #confetti-canvas {
-      position: fixed; 
-      z-index: 999; 
-      top: 0; 
-      left: 0; 
-      width: 100vw; 
-      height: 100vh; 
-      pointer-events: none;
-    }
-    </style>
-<!-- fin des confettis -->    
 </footer>
 </html>

demineur.js

@@ -1,7 +1,7 @@
 class Case_grille {
     constructor(x, y) {
 	this.posX = x;
-	this.posy = y;
+	this.posY = y;
 	this.isMine = false;
 	this.number = 0;
 	this.hidden = true;
@@ -21,7 +21,6 @@ let number_mines = 10 ;
 
 
 function creerGrille(haut, larg, mine_nb) {
-    
     grille.length = haut;
     for (var i = 0; i < haut; i++) {
         grille[i] = Array(larg);
@@ -30,15 +29,13 @@ function creerGrille(haut, larg,mine_nb) {
         }
     }
 
-
     for (var k = 0; k < mine_nb; k++) {
-	
         let new_x = Math.floor(Math.random() * larg);
         let new_y = Math.floor(Math.random() * haut);
 
         while (grille[new_y][new_x] == 9) {
-	    let new_x = Math.floor(Math.random() * larg) ;
+            new_x = Math.floor(Math.random() * larg);
-	    let new_y = Math.floor(Math.random() * haut) ;
+            new_y = Math.floor(Math.random() * haut);
         }
 
         grille[new_y][new_x] = 9;
@@ -49,7 +46,6 @@ function creerGrille(haut, larg,mine_nb) {
                 }
             }
         }
-	
     }
 }
 
@@ -134,12 +130,12 @@ function selectImage(idCase) {
     const coords = idCase.split("_") ;
     const x = parseInt(coords[0]) ;
     const y = parseInt(coords[1]) ;
-    return("url('case_" + grille[x][y].toString() + ".png')'") ;
+    return("url('case_" + grille[x][y].toString() + ".png')");
 }
 
 function changeImage(mouseEvent) {
     if (!(mouseEvent.target.classList.contains("buttonFlagged"))) {
-	mouseEvent.target.style.background= selectImage(this.id) ;
+	mouseEvent.target.style.background= selectImage(mouseEvent.target.id) ;
 	mouseEvent.target.classList.add("buttonRevealed") ;
     }
 }
@@ -175,8 +171,8 @@ function grilleButtons(haut, larg) {
     for (var i=0;i<haut;i++) {
 	for (var j=0;j<larg;j++){
 	    var newCase = document.createElement("BUTTON") ;
-	    newCase.style.gridRow=i.toString() ;
+	    newCase.style.gridRow=(i+1).toString() ;
-	    newCase.style.gridColumn = j.toString() ;
+	    newCase.style.gridColumn = (j+1).toString() ;
 	    newCase.classList.add("button_case") ;
 	    newCase.id = i.toString() + "_" + j.toString() ;
 	    newCase.style.background="url('case_vide.png')" ;

style.css

@@ -27,7 +27,10 @@
     background-color: #fff;
 
 }
-
+#grille {
+    display: grid;
+    gap: 1px; /* Ajout d'un écart entre les cases pour une meilleure visibilité */
+}
 .button_case{
     width : 50px;
     height : 50px;
@@ -89,3 +92,4 @@
     background-color: #1ecfee;
     
 }
+