Added gameWin() & addFlag() for right click event #Day47

Author: VertikaJain

minesweeper-game/README.md

@@ -14,14 +14,20 @@
 
 1. Create a constant grid Container using querySelector(".grid"), and a const GAME_WIDTH to specify the game size while creating the game board.
 2. Use document.addEventListener("DOMContentLoaded"()=>{ } ) for the rest of the game functionality.
-3. Create the board by adding 100 boxes to it, using createElement(), setAttribute() & AppendChild() in the for loop.
+3. Create the board using createBoard() method, by adding 100 boxes to it, using createElement(), setAttribute() & AppendChild() in the for loop.
 4. Create a ShuffledArray that includes bomb & other elements at random position, and add it to each box in the for loop using box.classList.add().
 5. In method addNumbersToBoard(), specify conditions to add number of neighbouring bombs to the each valid (non-bomb) box. 
 7. Use setAttribute() to add the "total" attribute and it's value to each valid box element.
-8. Add eventListener for click event, and add a new class "checked" on click of a valid box.
+8. Add eventListener for click event in createBoard(), and call a new method click(). Then add a new class "checked" on click of a valid box.
 9. Assign value of "total" to the valid box using getAttribute(), and then call a new method checkBox() for recursive steps.
 10. Create a new file recurse.js and export the checkBox() method.
+11. Implement recursion in the checkBox() method, to display total value of neighbouring boxes of the clicked box. The recursion continues until and edge or a bomb is the neighbouring element.
+12. Create a gameOver() method, the assigns true to isGameOver variable, and displays all the bombs once a bomb is clicked by the player.
+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.
 
 ## Resources
 
 1. [MineSweeper using JS](https://www.youtube.com/watch?v=W0No1JDc6vE&t)
+2. [About MineSweeper](https://en.wikipedia.org/wiki/Minesweeper_(video_game))

minesweeper-game/game.js

@@ -4,6 +4,7 @@ const gridContainer = document.querySelector(".grid");
 const GRID_WIDTH = 100;
 let bombCount = 20;
 let isGameOver = false;
+let flag = 0;
 
 document.addEventListener("DOMContentLoaded", () => {
     createBoard();
@@ -22,12 +23,33 @@ let createBoard = () => {
         box.classList.add(shuffledArray[i]); // add bomb/valid classes to the boxes on the grid
         gridContainer.appendChild(box);
         box.addEventListener("click", () => click(box));
+        box.oncontextmenu = event => {
+            event.preventDefault();
+            addFlag(box); // add flag on right click
+        }
     }
 }
 
 export const boxElements = gridContainer.children;
 export const width = 10; // width of one column
 
+// method to add flags when right clicked on a box containing bomb.
+let addFlag = box => {
+    if (isGameOver) return;
+    if (!box.classList.contains("checked") && (flag < bombCount)) {
+        if (!box.classList.contains("flag")) {
+            box.classList.add("flag");
+            box.innerHTML = "🚩";
+            flag++;
+            gameWin();
+        } else {
+            box.classList.remove("flag");
+            box.innerHTML = "";
+            flag--;
+        }
+    }
+}
+
 // method to add number of neighbouring bombs to the each valid (non-bomb) box.
 let addNumbersToBoard = () => {
     for (let box of boxElements) {
@@ -75,6 +97,7 @@ export let click = box => {
     box.classList.add("checked");
 }
 
+// method to declare game Over when player clicks on bomb element.
 let gameOver = box => {
     alert("game over");
     isGameOver = true;
@@ -83,8 +106,24 @@ let gameOver = box => {
     }
 }
 
+// method to declare game Win when the number of flags matches the bomb count.
+let gameWin = () => {
+    let flagBombMatchCount = 0;
+    for (let box of boxElements) {
+        if (box.classList.contains("flag") && box.classList.contains("bomb")) {
+            flagBombMatchCount++;
+        }
+        if (flagBombMatchCount === bombCount) {
+            alert("you won");
+            isGameOver = true;
+        }
+    }
+}
+
 /* Learnings:
     1. fill() method changes all elements in an array to the specified static value.
     2. parseInt() used to convert the given value to Integer.
     3. contains() to check if the element has the specified value.
+    4. getAttribute() used to access the attribute specified for the given element.
+    5. onContextMenu property fires when the player clicks the right mouse button, opening the context menu.
 */