Added Scores, Restart Btn, Styling & Design #Day48

Author: VertikaJain

minesweeper-game/README.md

@@ -2,13 +2,17 @@
 
 ## HTML
 
-1. Create <div> with grid class in the body of HTML.
+1. Create div with grid class in the body of HTML.
 2. Elements will be dynamically added to this grid div using JS.
+3. Add a result heading to display Scores of player.
+4. Create a button Restart that will reload the game.
 
 ## CSS
 
 1. Create a grid layout with 10x10 boxes of 40px each, hence grid size will be 400x400px
 2. Specify the size of each box separately, using .grid div { height: 40px; width: 40px; }
+3. Align the headings & elements to the center.
+4. Make text as bold and use border for better visualization of the game's grid.
 
 ## JavaScript Code
 
@@ -26,6 +30,8 @@
 13. Create addFlag() method, to add flags on the boxes that have bomb element and are right clicked by the player, to mark as safe. 
 14. Use onContextMenu property in createBoard(), that calls addFlag() on right click on a box with bomb element.
 15. Create a gameWin() method to check if the number of flags added by the player matches the total number of bombs. If yes, then the player is declared as Winner. This method is called everytime a flag is added to the game board.
+16. Update the Scores on click of a valid box in the game.
+17. Enable the button restart when the player wins or looses the game.
 
 ## Resources
 

minesweeper-game/Web Design Preview/The MineSweeper Game.mp4

@@ -1,10 +1,14 @@
 import { checkBox } from "./recurse.js";
 
 const gridContainer = document.querySelector(".grid");
+const result = document.querySelector(".result");
+const button = document.getElementById("btn");
+
 const GRID_WIDTH = 100;
 let bombCount = 20;
 let isGameOver = false;
 let flag = 0;
+let resultCount = 1;
 
 document.addEventListener("DOMContentLoaded", () => {
     createBoard();
@@ -22,7 +26,10 @@ let createBoard = () => {
         box.setAttribute("id", i);
         box.classList.add(shuffledArray[i]); // add bomb/valid classes to the boxes on the grid
         gridContainer.appendChild(box);
-        box.addEventListener("click", () => click(box));
+        box.addEventListener("click", () => {
+            click(box);
+            if (box.classList.contains("valid")) result.innerHTML = "Your Scores: " + resultCount++;
+        });
         box.oncontextmenu = event => {
             event.preventDefault();
             addFlag(box); // add flag on right click
@@ -84,12 +91,18 @@ let addNumbersToBoard = () => {
 export let click = box => {
     if (isGameOver) return;
     if (box.classList.contains("checked") || box.classList.contains("flag")) return;
-    if (box.classList.contains("bomb")) gameOver(box);
+    if (box.classList.contains("bomb")) gameOver();
     if (box.classList.contains("valid")) {
         box.classList.add("checked");
         let total = box.getAttribute("total");
         if (total != 0) {
             box.innerHTML = total;
+            if (total == 1) box.style.color = "blue";
+            if (total == 2) box.style.color = "green";
+            if (total == 3) box.style.color = "red";
+            if (total == 4) box.style.color = "purple";
+            if (total == 5) box.style.color = "maroon";
+            if (total == 6) box.style.color = "darkgreen";
             return;
         }
         checkBox(box);
@@ -98,12 +111,17 @@ export let click = box => {
 }
 
 // method to declare game Over when player clicks on bomb element.
-let gameOver = box => {
-    alert("game over");
+let gameOver = () => {
+    result.innerHTML = "GAME OVER!";
+    result.style.color = "red";
     isGameOver = true;
-    for (let box of boxElements) {
-        if (box.classList.contains("bomb")) box.innerHTML = "💣";
-    }
+    for (let box of boxElements)
+        if (box.classList.contains("bomb")) {
+            box.innerHTML = "💣";
+            box.classList.remove('bomb')
+            box.classList.add('checked')
+        }
+    button.style.display = "block";
 }
 
 // method to declare game Win when the number of flags matches the bomb count.
@@ -114,7 +132,9 @@ let gameWin = () => {
             flagBombMatchCount++;
         }
         if (flagBombMatchCount === bombCount) {
-            alert("you won");
+            result.innerHTML = "CONGRATULATIONS! YOU WON!";
+            result.style.color = "purple";
+            button.style.display = "block";
             isGameOver = true;
         }
     }

minesweeper-game/game.js

@@ -4,12 +4,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MineSweeper Game</title>
+    <title>The MineSweeper Game</title>
     <link rel="stylesheet" href="styles.css"/>
 </head>
 
 <body>
+    <h1>The MineSweeper Game</h1>
     <div class="grid"></div>
+    <h2 class="result"></h2>
+    <button id="btn" onclick="window.location.reload()">Restart</button>
     <script src="game.js" type="module"></script>
 </body>
 

minesweeper-game/index.html

@@ -1,4 +1,4 @@
-import { click, boxElements, width } from "./game.js";
+import { click, width } from "./game.js";
 
 // implementing recursion to display total value of neighbouring boxes of the clicked box
 export let checkBox = box => {

minesweeper-game/recurse.js

@@ -4,28 +4,38 @@ body {
     align-items: center;
 }
 
+h1,h2 {
+    text-align: center;
+}
+
 .grid {
     height: 400px;
     width: 400px;
     display: flex;
-    margin-top: 100px;
     flex-wrap: wrap;
-    background-color: rosybrown;
+    background-color: rgb(180, 194, 209);
 }
 
 .grid div {
-    height: 40px;
-    width: 40px;
+    border: 2px solid rgb(100, 100, 100);
+    height: 36px;
+    width: 36px;
+    font-size: 25px;
 }
 
 .bomb {
-    background-color: purple;
     text-align: center;
 }
 
 .checked {
-    background-color: rgb(243, 215, 238);
+    background-color: rgb(250, 234, 247);
     text-align: center;
+    font-weight: bold; 
+}
+
+#btn {
+    display: none;
+    font-weight: bolder;
 }
 
 /* each box to be of 40px, and grid has 10x10 boxes*/