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..4ef6908c50 100644 --- a/Games/Minesweeper/script.js +++ b/Games/Minesweeper/script.js @@ -29,19 +29,26 @@ function setMines() { function startGame() { document.getElementById("mines-count").innerText = minesCount; document.getElementById("flag-button").addEventListener("click", setFlag); + document.getElementById("restart-button").addEventListener("click", resetGame); + + initializeBoard(); +} + +function initializeBoard() { + setMines(); -for (let r = 0; r < rows; r++) { - let row = []; - for (let c = 0; c < columns; c++) { - let tile = document.createElement("div"); - tile.id = r.toString() + "-" + c.toString(); - tile.addEventListener("click", clickTile); - document.getElementById("board").append(tile); - row.push(tile); - } - board.push(row); - } + for (let r = 0; r < rows; r++) { + let row = []; + for (let c = 0; c < columns; c++) { + let tile = document.createElement("div"); + tile.id = r.toString() + "-" + c.toString(); + tile.addEventListener("click", clickTile); + document.getElementById("board").append(tile); + row.push(tile); + } + board.push(row); + } } function setFlag() { @@ -96,6 +103,10 @@ function revealMines() { } } } + + const restartButton = document.getElementById("restart-button"); + restartButton.innerText = "Restart"; + restartButton.style.display = "block"; } function checkMine(r, c) { @@ -148,6 +159,10 @@ function checkMine(r, c) { if (tilesClicked == rows * columns - minesCount) { document.getElementById("mines-count").innerText = "Cleared"; gameOver = true; + + const restartButton = document.getElementById("restart-button"); + restartButton.innerText = "AGAIN"; + restartButton.style.display = "block"; } } @@ -161,4 +176,19 @@ function checkTile(r, c) { return 1; } return 0; +} + +function resetGame() { + board = []; + minesLocation = []; + tilesClicked = 0; + flagEnabled = false; + gameOver = false; + + document.getElementById("board").innerHTML = ""; + document.getElementById("flag-button").style.backgroundColor = "lightgray"; + document.getElementById("mines-count").innerText = minesCount; + document.getElementById("restart-button").style.display = "none"; + + startGame(); } \ No newline at end of file diff --git a/Games/Minesweeper/styles.css b/Games/Minesweeper/styles.css index 304bb8432b..81e7bc6f9d 100644 --- a/Games/Minesweeper/styles.css +++ b/Games/Minesweeper/styles.css @@ -93,5 +93,19 @@ h1{ position: absolute; top: 90%; left: 53%; - transform: translate(-90%, -53%); + transform: translate(-150%, -53%); +} + +#restart-button { + width: 100px; + height: 50px; + font-size: 25px; + background-color: lightgray; + color: rgb(0, 0, 0); + border: none; + border-radius: 10px; + position: absolute; + top: 90%; + left: 51%; + transform: translate(20px, -50%); } \ No newline at end of file