Saper prawie skończony, zostało tylko odkrycie wszystkich pól po przegranej/wygranej

Lekcja_04/index.html

@@ -79,16 +79,13 @@
         }
 
         .odkryte-pole {
-            background-color: transparent;
+            background-color: darkgray;
+            font-weight: bold;
         }
 
         #message {
             text-align: center;
         }
-
-        .debug-czerwony {
-            background-color: red;
-        }
     </style>
 </head>
 
@@ -132,43 +129,98 @@
         let m = 0
 
         let gra = true
+        let polozono_miny = false
         let odkryte_pola = 0
 
         // tablica z polami
         let plansza = [] // tablice obiektów (pól) { x: int, y: int, mina: true/false, sasiednie_miny: int }
         const kolorki = ["red", "green", "blue", "darkseagreen", "cornflowerblue", "beige", "orange", "navy"]
 
-        function flaga() {
-            console.log(this, this.dataset.x, this.dataset.y)
-
-            let x = this.dataset.x
-            let y = this.dataset.y
+        function flaga(btn) {
+            let x = btn.dataset.x
+            let y = btn.dataset.y
 
             if (!gra) { return }
             event.preventDefault()
 
-            console.log(`Oflagowano pole (${x}, ${y})`)
+            if (btn.classList.contains("nieodkryte-pole")) {
+                plansza[y][x].flaga = !plansza[y][x].flaga;
+                plansza[y][x].flaga ? btn.innerHTML = '&#128681;' : btn.innerHTML = '';
+            }
         }
 
-        function klik() {
-            console.log(this, this.dataset.x, this.dataset.y)
+        function klik(btn) {
+            let x = btn.dataset.x
+            let y = btn.dataset.y
 
-            let x = this.dataset.x
-            let y = this.dataset.y
+            if (!polozono_miny) {
+                losuj_miny(x, y)
+                polozono_miny = true
+            }
 
             if (!gra) { return }
-            console.log(`Kliknięto pole (${x}, ${y})`)
+            if (plansza[y][x].flaga) { return }
+            if (document.getElementById(`p${x}${y}`).classList.contains("odkryte-pole")) { return }
 
             if (plansza[y][x].mina) {
-                alert("xdddd No i kurna przegrałeś")
+                alert("Koniec gry, przegrana!")
+                document.getElementById(`p${x}${y}`).style.backgroundColor = "red";
                 gra = false
+            } else {
+                btn.classList.remove("nieodkryte-pole")
+                btn.classList.add("odkryte-pole")
+                if (plansza[y][x].sasiednie_miny != 0) {
+                    btn.innerText = plansza[y][x].sasiednie_miny
+                    btn.style.color = kolorki[plansza[y][x].sasiednie_miny - 1]
+                }
+                odkryte_pola++
+                if (odkryte_pola == (w * h) - m) {
+                    alert("Koniec gry, wygrana!")
+                    gra = false
+                }
+            }
+
+            // jeśli nie ma min dookoła to odkryj pola sąsiednie
+            if (plansza[y][x].sasiednie_miny == 0) {
+                let i = y;
+                let j = x - 1;
+
+                if (i >= 0 && i < h && j >= 0 && j < w) {
+                    if (document.getElementById(`p${j}${i}`).classList.contains("nieodkryte-pole")) {
+                        klik(document.getElementById(`p${j}${i}`))
+                    }
+                }
+
+                j += 2;
+
+                if (i >= 0 && i < h && j >= 0 && j < w) {
+                    if (document.getElementById(`p${j}${i}`).classList.contains("nieodkryte-pole")) {
+                        klik(document.getElementById(`p${j}${i}`))
+                    }
+                }
+
+                j = x;
+                i = y - 1;
+
+                if (i >= 0 && i < h && j >= 0 && j < w) {
+                    if (document.getElementById(`p${j}${i}`).classList.contains("nieodkryte-pole")) {
+                        klik(document.getElementById(`p${j}${i}`))
+                    }
+                }
+
+                i += 2;
+
+                if (i >= 0 && i < h && j >= 0 && j < w) {
+                    if (document.getElementById(`p${j}${i}`).classList.contains("nieodkryte-pole")) {
+                        klik(document.getElementById(`p${j}${i}`))
+                    }
+                }
             }
         }
 
         function przygotuj() {
             plansza = []
 
-
             const plansza_table = document.getElementById("plansza")
             plansza_table.innerHTML = ''
 
@@ -178,36 +230,28 @@
                 plansza.push([])
                 n_html += '<tr>'
                 for (let j = 0; j < w; j++) {
-                    plansza[i].push({ x: j, y: i, mina: false, sasiednie_miny: 0 })
-                    n_html += `<td class="nieodkryte-pole" id="p${j}${i}" onclick="klik" oncontextmenu="flaga" data-x="${j}" data-y="${j}"></td>`
+                    plansza[i].push({ x: j, y: i, mina: false, sasiednie_miny: 0, flaga: false })
+                    n_html += `<td class="nieodkryte-pole" id="p${j}${i}" onclick="klik(this)" oncontextmenu="flaga(this)" oncontextmenu="flaga" data-x="${j}" data-y="${i}"></td>`
                 }
                 n_html += '</tr>'
             }
             plansza_table.innerHTML += n_html
         }
 
-        function losuj_miny() {
-            let max = w * h;
-            let miny = []
+        function losuj_miny(unikaj_x = 0, unikaj_y = 0) {
             let wspolrzedne_min = []
 
-            while (miny.length < 10) {
-                let losowa = Math.floor(Math.random() * max)
-                if (miny.find(mina => mina == losowa) == undefined) {
-                    miny.push(losowa)
+            while (wspolrzedne_min.length < m) {
+                let random_x = Math.floor(Math.random() * w)
+                let random_y = Math.floor(Math.random() * h)
+
+                if (!wspolrzedne_min.find(wspolrzedna => (wspolrzedna.x == random_x && wspolrzedna.y == random_y))) {
+                    if (!(random_x == unikaj_x && random_y == unikaj_y)) {
+                        wspolrzedne_min.push({ x: random_x, y: random_y })
+                    }
                 }
             }
 
-            miny.forEach(mina => {
-                let w_m = Math.floor(mina / w)
-                let h_m = mina % h
-
-                wspolrzedne_min.push({ x: w_m, y: h_m })
-
-                // debug
-                document.getElementById(`p${w_m}${h_m}`).classList.add("debug-czerwony")
-            })
-
             wspolrzedne_min.forEach(wspolrzedna => {
                 // znajdz pole
                 plansza[wspolrzedna.y][wspolrzedna.x].mina = true
@@ -224,8 +268,6 @@
                         if (j == wspolrzedna.x && i == wspolrzedna.y) { continue }
 
                         plansza[i][j].sasiednie_miny += 1
-
-                        document.getElementById(`p${j}${i}`).innerText = plansza[i][j].sasiednie_miny
                     }
                 }
             })
@@ -247,14 +289,14 @@
                 return
             }
 
+            gra = true
+            polozono_miny = false
+            odkryte_pola = 0
             w = w_t
             h = h_t
             m = m_t
 
             przygotuj()
-            losuj_miny()
-
-
         }
     </script>
 </body>