Saper prawie skończony, zostało tylko odkrycie wszystkich pól po przegranej/wygranej
This commit is contained in:
Adam Łukasik committed
1 parent
5bab25833b
commit
9be3fef4eb
2 files changed
+153
-42
No files matched your search
+84
-42
@@ -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 = '🚩' : 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,35 +230,27 @@
|
||||
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
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script>
|
||||
function zmiana(d) {
|
||||
d.innerText = "Szymek";
|
||||
}
|
||||
|
||||
function init() {
|
||||
const els = document.getElementsByTagName("button");
|
||||
console.log(els);
|
||||
for (let i = 0; i < els.length; i++) {
|
||||
// els[i].onclick = function () {
|
||||
// console.log("click", this);
|
||||
// }
|
||||
|
||||
els[i].onclick = (e) => {
|
||||
console.log("click", this, e, e.target);
|
||||
e.target.style.backgroundColor = "pink"
|
||||
}
|
||||
|
||||
//els[i].onclick = function () {
|
||||
// console.log("test");
|
||||
//}
|
||||
// nadpisuje tego samego typu zdarzenie
|
||||
}
|
||||
|
||||
// Listenery
|
||||
const inner = document.getElementById("inner");
|
||||
inner.addEventListener("click", function (e) {
|
||||
console.log("INNER1", e)
|
||||
e.stopPropagation();
|
||||
}, false);
|
||||
|
||||
const outer = document.getElementById("outer");
|
||||
outer.addEventListener("click", function () {
|
||||
console.log("OUTER")
|
||||
|
||||
}, false); // true/false event capturing bubbling
|
||||
|
||||
// inner.addEventListener("click", function () {
|
||||
// console.log("INNER2")
|
||||
// }, false);
|
||||
// zdarzenie sie "dopisuje"
|
||||
// removeEventListener
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="init();" oncontextmenu="console.log('menu');event.preventDefault();">
|
||||
<!--
|
||||
<button onclick="console.log('click',this);zmiana(this)" onmouseover="console.log('over')">A</button>
|
||||
<button onclick="console.log('click',this);zmiana(this)">B</button>
|
||||
<button onclick="console.log('click',this);zmiana(this)">C</button>
|
||||
-->
|
||||
<button>A</button>
|
||||
<button>B</button>
|
||||
<button>C</button>
|
||||
|
||||
<div id="outer">OUTER
|
||||
<div id="inner">INNER</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user