Merge pull request #239 from Sambit-Mondal/MinesweeperGameJSextension

Fixes #187 : Minesweeper Game
Sulagna-Dutta-Roy · May 16, 2024 · bf84dd2 · bf84dd2
2 parents d6f669d + d397e18
commit bf84dd2
Show file tree

Hide file tree

Showing 5 changed files with 239 additions and 0 deletions.
diff --git a/Minesweeper Game/assets/Minesweeper.jpg b/Minesweeper Game/assets/Minesweeper.jpg
diff --git a/Minesweeper Game/index.html b/Minesweeper Game/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Minesweeper</title>
+    <link rel="stylesheet" href="src/style.css" />
+</head>
+
+<body background="assets/Minesweeper.jpg">
+    <div class="minesweeper">
+        <div id="points"><strong>Points: 0</strong></div>
+        <div id="board"></div>
+        <button id="resetButton">Reset</button>
+    </div>
+
+    <script src="scripts/script.js"></script>
+</body>
+
+</html>
diff --git a/Minesweeper Game/manifest.json b/Minesweeper Game/manifest.json
@@ -0,0 +1,28 @@
+{
+    "manifest_version": 3,
+    "name": "Minesweeper Game Extension JS",
+    "version": "1.0",
+    "description": "Minesweeper game extension built in pure HTML CSS JS...",
+    "author" : "[email protected]",
+    "icons": {
+        "48": "images/icon-48.png",
+        "128": "images/icon-128.png"
+    },
+    "permissions": [
+        "storage"
+    ],
+    "optional-permissions" : ["tabs"],
+    "action": {
+        "default_popup": "index.html"
+    },
+    "web_accessible_resources": [
+        {
+            "resources": [
+                "index.html"
+            ],
+            "matches": [
+                "<all_urls>"
+            ]
+        }
+    ]
+}
diff --git a/Minesweeper Game/scripts/script.js b/Minesweeper Game/scripts/script.js
@@ -0,0 +1,113 @@
+const boardSize = 10;
+const totalMines = 20;
+let mines = [];
+let revealedCells = 0;
+let points = 0;
+
+function initializeBoard() {
+    const board = document.getElementById("board");
+    for (let i = 0; i < boardSize * boardSize; i++) {
+        const cell = document.createElement("div");
+        cell.classList.add("cell");
+        cell.setAttribute("data-index", i);
+        cell.addEventListener("click", handleCellClick);
+        board.appendChild(cell);
+    }
+
+    generateMines();
+}
+
+function generateMines() {
+    mines = Array.from({ length: totalMines }, () =>
+        Math.floor(Math.random() * (boardSize * boardSize))
+    );
+}
+
+function handleCellClick(event) {
+    const clickedIndex = parseInt(event.target.getAttribute("data-index"));
+    if (mines.includes(clickedIndex)) {
+        revealMines();
+        alert("Game Over! You hit a mine.");
+    } else {
+        revealCell(clickedIndex);
+        points++;
+        updatePoints();
+        if (revealedCells === boardSize * boardSize - totalMines) {
+            alert("Congratulations! You won!");
+        }
+    }
+}
+
+function revealMines() {
+    mines.forEach((index) => {
+        const cell = document.querySelector(`.cell[data-index="${index}"]`);
+        cell.classList.add("mine");
+    });
+}
+
+function revealCell(index) {
+    const cell = document.querySelector(`.cell[data-index="${index}"]`);
+    if (!cell.classList.contains("revealed")) {
+        cell.classList.add("revealed");
+        revealedCells++;
+
+        const mineCount = countAdjacentMines(index);
+        if (mineCount > 0) {
+            cell.textContent = mineCount;
+        } else {
+            const neighbors = getNeighbors(index);
+            neighbors.forEach((neighborIndex) => revealCell(neighborIndex));
+        }
+    }
+}
+
+function countAdjacentMines(index) {
+    const neighbors = getNeighbors(index);
+    return neighbors.filter((neighborIndex) => mines.includes(neighborIndex))
+        .length;
+}
+
+function getNeighbors(index) {
+    const neighbors = [];
+    const row = Math.floor(index / boardSize);
+    const col = index % boardSize;
+
+    for (let i = -1; i <= 1; i++) {
+        for (let j = -1; j <= 1; j++) {
+            const neighborRow = row + i;
+            const neighborCol = col + j;
+            if (
+                neighborRow >= 0 &&
+                neighborRow < boardSize &&
+                neighborCol >= 0 &&
+                neighborCol < boardSize
+            ) {
+                neighbors.push(neighborRow * boardSize + neighborCol);
+            }
+        }
+    }
+
+    return neighbors;
+}
+
+function updatePoints() {
+    const pointsDisplay = document.getElementById("points");
+    pointsDisplay.textContent = `Points: ${points}`;
+}
+
+function resetGame() {
+    const cells = document.querySelectorAll(".cell");
+    cells.forEach((cell) => {
+        cell.classList.remove("revealed", "mine");
+        cell.textContent = "";
+    });
+    revealedCells = 0;
+    points = 0;
+    updatePoints();
+    generateMines();
+}
+
+initializeBoard();
+
+const resetButton = document.getElementById("resetButton");
+resetButton.addEventListener("click", resetGame);
diff --git a/Minesweeper Game/src/style.css b/Minesweeper Game/src/style.css
@@ -0,0 +1,76 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-position: center;
+    background-size: cover;
+}
+
+.minesweeper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    border: 2px solid rgba(52, 38, 8, 0.895);
+    padding: 30px 30px;
+    background-color: rgba(52, 38, 8, 0.539);
+    backdrop-filter: blur(20px);
+    border-radius: 10px;
+    box-shadow: 4px 4px 3px rgba(52, 38, 8, 0.539);
+}
+
+#points {
+    margin-bottom: 20px;
+    font-size: 1.5em;
+    color: #fff;
+    font-weight: 600;
+}
+
+#board {
+    display: grid;
+    gap: 2px;
+    grid-template-columns: repeat(10, 40px);
+    border: 1px solid #ccc;
+}
+
+.cell {
+    width: 40px;
+    height: 40px;
+    background-color: #ddd;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 14px;
+    user-select: none;
+}
+
+.cell:hover {
+    background-color: #eee;
+}
+
+.mine {
+    background-color: #f00;
+    color: #fff;
+}
+
+#resetButton {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    border-radius: 6px;
+    background-color: #007bff;
+    color: #fff;
+}