From d656de03fc22e5b39117087ef4e95cfc9f239708 Mon Sep 17 00:00:00 2001 From: Charles Cabergs Date: Sat, 7 Nov 2020 18:20:08 +0100 Subject: Added mine flagging, lost and won flash messages, won detection --- utils/minesweeper/flag.svg | 45 ++++++++++++++++++++++++++++++++++++ utils/minesweeper/index.html | 2 ++ utils/minesweeper/script.js | 55 +++++++++++++++++++++++++++++++++++++++----- utils/minesweeper/style.css | 26 +++++++++++++++++++++ 4 files changed, 122 insertions(+), 6 deletions(-) create mode 100644 utils/minesweeper/flag.svg (limited to 'utils') diff --git a/utils/minesweeper/flag.svg b/utils/minesweeper/flag.svg new file mode 100644 index 0000000..7ebc51c --- /dev/null +++ b/utils/minesweeper/flag.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/utils/minesweeper/index.html b/utils/minesweeper/index.html index c984ead..a5ece6b 100644 --- a/utils/minesweeper/index.html +++ b/utils/minesweeper/index.html @@ -12,6 +12,8 @@

minesweeper

+ +
diff --git a/utils/minesweeper/script.js b/utils/minesweeper/script.js index f19c7a2..3bc23f4 100644 --- a/utils/minesweeper/script.js +++ b/utils/minesweeper/script.js @@ -51,6 +51,21 @@ function floodFill(y, x) { floodFill(ny, nx) } +const timer_node = document.getElementById("minesweeper-timer") + +const flash_message_node = document.getElementById("flash-message") +flash_message_node.addEventListener("click", () => { flash_message_node.hidden = true }) + +function endFlashMessage(won) { + flash_message_node.textContent = + `You ${won ? "won" : "lost"} in ${timer_node.textContent} seconds` + flash_message_node.classList.remove("flash-won") + flash_message_node.classList.remove("flash-lost") + flash_message_node.classList.add(won ? "flash-won" : "flash-lost") + flash_message_node.hidden = false; + setTimeout(() => { flash_message_node.hidden = true }, 5000) +} + function initGrid() { let table = document.getElementById("minesweeper-table") table.innerHTML = "" @@ -94,10 +109,39 @@ function initGrid() { cell.addEventListener("click", () => { if (!running) toggleRunning() - if (mines[i][j] === -1) + if (cell.classList.contains("flagged")) { + cell.classList.remove("flagged") + return + } + if (mines[i][j] === -1) { + endFlashMessage(false) toggleRunning() - else + } + else { floodFill(i, j) + won = true; + for (let y = 0; y < width; y++) { + for (let x = 0; x < width; x++) { + if (mines[y][x] !== -1 && !cells[y][x].classList.contains("visited")) + won = false + } + } + if (won) { + endFlashMessage(true) + toggleRunning() + } + } + }) + cell.addEventListener("contextmenu", event => { + event.preventDefault() + if (!running) + toggleRunning() + if (cell.classList.contains("visited")) + return + if (cell.classList.contains("flagged")) + cell.classList.remove("flagged") + else + cell.classList.add("flagged") }) cells[i].push(cell) table_cell.appendChild(cell) @@ -117,11 +161,10 @@ function toggleRunning() { initGrid() } else { - let timer_elem = document.getElementById("minesweeper-timer") current_time = 0 - timer_elem.textContent = current_time + timer_node.textContent = current_time interval = setInterval(() => { - timer_elem.textContent = current_time + timer_node.textContent = current_time current_time++ }, 1000) } @@ -132,6 +175,6 @@ function toggleRunning() { info.hidden = !info.hidden } -document.getElementById("minesweeper-stop") .addEventListener("click", toggleRunning) +document.getElementById("minesweeper-stop").addEventListener("click", toggleRunning) initGrid() diff --git a/utils/minesweeper/style.css b/utils/minesweeper/style.css index b9c6c1c..7d2a0b1 100644 --- a/utils/minesweeper/style.css +++ b/utils/minesweeper/style.css @@ -44,6 +44,10 @@ table button.visited { border-width: 1px; } +table button.flagged { + background: url("flag.svg"); +} + button { font-weight: bold; } @@ -91,3 +95,25 @@ input { padding: 5px 10px; margin: 0 !important; } + +#flash-message { + padding: 10px; + border: solid; + border-width: 2px; + border-radius: 7px; + margin: auto; + width: 50%; + margin-bottom: 30px; + text-align: center; +} + +#flash-message.flash-won { + background: #2e7d32; + border-color: #1b5e20; +} + +#flash-message.flash-lost { + background: #c62828; + border-color: #b71c1c; +} + -- cgit