Minesweeper JS Game

dayo4 · Oct 5, 2022 · 1bb4bc5 · 1bb4bc5
1 parent 987f053
commit 1bb4bc5
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 0 deletions.
diff --git a/Minesweeper/vanshuhassija/README.md b/Minesweeper/vanshuhassija/README.md
@@ -0,0 +1,5 @@
+## Minesweeper reinvented
+
+### Javascript Minesweeper
+
+This project is a javascript based game. It allows you to click a cell from 9*9 grid. It shows the number of bombs placed in the surrounding. If a bomb is clicked at any point, game gets over and you are asked to play again.
diff --git a/Minesweeper/vanshuhassija/index.html b/Minesweeper/vanshuhassija/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-e0quiv="X-UA-Compatible" content="ie=edge" />
+    <title>Bomber-JS</title>
+    <link rel="stylesheet" type="text/css" href="./style/index.css">  </head>
+  <body>
+    <div class="grid"></div>
+    <div class="footer">
+      <h3>
+        Points:
+        <span class="points"></span>
+      </h3>
+      <button onClick="playAgain()">Play again</button>
+    </div>
+    <script src="./js/index.js"></script>
+  </body>
+</html>
diff --git a/Minesweeper/vanshuhassija/js/index.js b/Minesweeper/vanshuhassija/js/index.js
@@ -0,0 +1,109 @@
+function playAgain() {
+    window.location.reload();
+  }
+  function generateBombIndicies(pCount, pMin, pMax) {
+    let min = pMin < pMax ? pMin : pMax;
+    let max = pMax > pMin ? pMax : pMin;
+    let resultArr = [],
+      randNumber;
+    while (pCount > 0) {
+      randNumber = Math.round(min + Math.random() * (max - min));
+      if (resultArr.indexOf(randNumber) === -1) {
+        resultArr.push(randNumber);
+        pCount--;
+      }
+    }
+    return resultArr;
+  }
+  function findNeighbourBombs(bombIndices, index, colCount, rowCount) {
+    let bombs = 0;
+    // positions
+    // |1|2|3|
+    // |4|x|5|
+    // |6|7|8|
+    if (index % colCount !== 1 && bombIndices.includes(index - colCount - 1)) {
+      bombs++;
+    }
+    if (index > colCount && bombIndices.includes(index - colCount)) {
+      bombs++;
+    }
+    if (index % colCount !== 0 && bombIndices.includes(index - colCount + 1)) {
+      bombs++;
+    }
+
+    if (index % colCount !== 1 && bombIndices.includes(index - 1)) {
+      bombs++;
+    }
+    if (index % colCount !== 0 && bombIndices.includes(index + 1)) {
+      bombs++;
+    }
+    if (index % colCount !== 1 && bombIndices.includes(index + colCount - 1)) {
+      bombs++;
+    }
+    if (
+      index <= colCount * (rowCount - 1) &&
+      bombIndices.includes(index + colCount)
+    ) {
+      bombs++;
+    }
+    if (index % colCount !== 0 && bombIndices.includes(index + colCount + 1)) {
+      bombs++;
+    }
+    return bombs;
+  }
+  function render() {
+    const rowCount = 9;
+    const colCount = 9;
+    const MIN = 1;
+    let bi = 0;
+    let points = 0;
+    let gameover = false;
+    let visited = [];
+    let bombIndices = generateBombIndicies(  
+      rowCount,
+      MIN,
+      rowCount * colCount);
+    let grid = document.querySelector(".grid");
+    let pointer = document.querySelector(".points");
+    pointer.innerHTML = points;
+    // grid creation
+    for (let j = 0; j < rowCount; j++) {
+      let row = document.createElement("div");
+      row.classList.add("row");
+      grid.appendChild(row);
+      for (let i = 1; i <= colCount; i++) {
+        let col = document.createElement("div");
+        col.classList.add("col");
+        col.setAttribute("id", i + j * 9);
+        //listener for bomb and safe buttons
+        col.addEventListener("click", () => {
+          if (bombIndices.indexOf(i + j * 9) !== -1) {
+            while (bi < bombIndices.length) {
+              let bombcol = document.getElementById(bombIndices[bi]);
+              bombcol.classList.add("bomb");
+              bombcol.innerHTML = "💣";
+              bi++;
+            }
+            gameover = true;
+          } else {
+            if (!gameover && !visited.includes(i + j * 9)) {
+              visited.push(i + j * 9);
+              let safeCol = document.getElementById(i + j * 9);
+              safeCol.classList.add("safe");
+              const neighbouringBombs = findNeighbourBombs(
+                bombIndices,
+                i + j * rowCount,
+                colCount,
+                rowCount
+              );
+              safeCol.innerHTML = neighbouringBombs;
+              points++;
+              pointer.innerHTML = points;
+            }
+          }
+        });
+        row.appendChild(col);
+      }
+    }
+  }
+  render();
diff --git a/Minesweeper/vanshuhassija/style/index.css b/Minesweeper/vanshuhassija/style/index.css
@@ -0,0 +1,32 @@
+.row {
+    display: flex;
+    justify-content: center;
+  }
+  .col {
+    border-top: 2px solid lightgrey;
+    border-bottom: 2px solid grey;
+    border-left: 2px solid lightgrey;
+    border-right: 2px solid grey;
+    background-color: #b6b6b6;
+    padding: 15px;
+    width: 1vw;
+    height: 1vw;
+    font-size: 1em;
+  }
+  .col:hover {
+    background-color: #dddddd;
+  }
+  .bomb {
+    background-color: rgb(228, 70, 70) !important;
+  }
+  .safe {
+    background-color: #49bc07 !important;
+  }
+  .points {
+    color: green;
+  }
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }