diff --git a/Games/Minesweeper/index.html b/Games/Minesweeper/index.html index 99c3ba4623..2c78dabbf9 100644 --- a/Games/Minesweeper/index.html +++ b/Games/Minesweeper/index.html @@ -18,5 +18,6 @@

Mines: 0


+ \ No newline at end of file diff --git a/Games/Minesweeper/script.js b/Games/Minesweeper/script.js index 2f3654b3c8..fddf08b39d 100644 --- a/Games/Minesweeper/script.js +++ b/Games/Minesweeper/script.js @@ -7,6 +7,8 @@ var tilesClicked = 0; var flagEnabled = false; var gameOver = false; window.onload = function() { + document.getElementById("flag-button").addEventListener("click", setFlag); + document.getElementById("restart-button").addEventListener("click", restartGame); startGame(); } function setMines() { @@ -28,9 +30,8 @@ function setMines() { function startGame() { document.getElementById("mines-count").innerText = minesCount; - document.getElementById("flag-button").addEventListener("click", setFlag); setMines(); -for (let r = 0; r < rows; r++) { + for (let r = 0; r < rows; r++) { let row = []; for (let c = 0; c < columns; c++) { let tile = document.createElement("div"); @@ -44,6 +45,21 @@ for (let r = 0; r < rows; r++) { } +function restartGame() { + board = []; + minesLocation = []; + tilesClicked = 0; + flagEnabled = false; + gameOver = false; + + document.getElementById("mines-count").innerText = minesCount; + document.getElementById("flag-button").style.backgroundColor = "lightgray"; + document.getElementById("restart-button").style.display = "none"; + document.getElementById("board").innerHTML = ""; + + startGame(); +} + function setFlag() { if (flagEnabled) { flagEnabled = false; @@ -96,6 +112,9 @@ function revealMines() { } } } + + document.getElementById("restart-button").innerText = "Restart"; + document.getElementById("restart-button").style.display = "inline-block"; } function checkMine(r, c) { @@ -147,7 +166,10 @@ function checkMine(r, c) { if (tilesClicked == rows * columns - minesCount) { document.getElementById("mines-count").innerText = "Cleared"; + document.getElementById("restart-button").innerText = "Play Again"; + document.getElementById("restart-button").style.display = "inline-block"; gameOver = true; + return; } } diff --git a/Games/Minesweeper/styles.css b/Games/Minesweeper/styles.css index 304bb8432b..170cb2b4a4 100644 --- a/Games/Minesweeper/styles.css +++ b/Games/Minesweeper/styles.css @@ -94,4 +94,19 @@ h1{ top: 90%; left: 53%; transform: translate(-90%, -53%); +} + +#restart-button { + display: none; + width: 140px; + height: 50px; + font-size: 20px; + font-weight: bold; + background-color: lightgray; + border: none; + border-radius: 10px; + position: absolute; + top: 77%; + left: 53.8%; + transform: translate(-90%, -53%); } \ No newline at end of file