Added Minesweeper Easy

kunjgit · Jun 13, 2024 · f9a2c2c · f9a2c2c
1 parent 390096a
commit f9a2c2c
Show file tree

Hide file tree

Showing 7 changed files with 284 additions and 1 deletion.
diff --git a/Games/MineSweeper_Easy/README.md b/Games/MineSweeper_Easy/README.md
@@ -0,0 +1,32 @@
+# **Game_Name** 
+
+Mine Sweeper
+
+<br>
+
+## **Description 📃**
+- Minesweeper is a classic puzzle game that involves a grid of squares. Some squares contain mines, while others do not.
+- The objective of the game is to reveal all the squares that do not contain mines without triggering any mines.
+
+
+## **functionalities 🎮**
+- Player can mark a cell as a mine if they suspect it.
+- Player can reveal a cell to find it as a number
+- If all the cells are opened without opening a mine, player wins!
+- If any cell containing a mine is clicked, player loses.
+- Restart button to restart the game from beginning
+
+<br>
+
+## **How to play? 🕹️**
+- Left click on a cell to reveal it
+- Right click on a cell to mark a flag if you suspect it is a mine
+- If you reveal all the cells without revealing any of the cell containing a mine, you win
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+[image](/Games/MineSweeper_Easy/assets/images/MineSweeper_Easy.png)
+
diff --git a/Games/MineSweeper_Easy/assets/images/MineSweeper_Easy.png b/Games/MineSweeper_Easy/assets/images/MineSweeper_Easy.png
diff --git a/Games/MineSweeper_Easy/index.html b/Games/MineSweeper_Easy/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Minesweeper Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Minesweeper</h1>
+    <div class="instructions">
+        <p>Rules:</p>
+        <ul>
+            <li>Click on a cell to reveal it.</li>
+            <li>Right-click on a cell to flag it as a mine.</li>
+            <li>Reveal all non-mine cells to win.</li>
+        </ul>
+        <p>Total mines: <span id="mineCount"></span></p>
+    </div>
+    <div id="status"></div>
+    <div id="gameBoard"></div>
+    <button id="restartButton">Restart</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/MineSweeper_Easy/script.js b/Games/MineSweeper_Easy/script.js
@@ -0,0 +1,155 @@
+const gameBoard = document.getElementById('gameBoard');
+const mineCountElement = document.getElementById('mineCount');
+const statusElement = document.getElementById('status');
+const restartButton = document.getElementById('restartButton');
+const boardSize = 10;
+const mineCount = 10;
+
+let board = [];
+let mineLocations = [];
+let gameOver = false;
+
+function initBoard() {
+    board = Array.from({ length: boardSize }, () =>
+        Array.from({ length: boardSize }, () => ({
+            mine: false,
+            revealed: false,
+            flag: false,
+            adjacentMines: 0
+        }))
+    );
+
+    mineLocations = [];
+    gameOver = false;
+    statusElement.textContent = '';
+
+    let minesPlaced = 0;
+    while (minesPlaced < mineCount) {
+        const row = Math.floor(Math.random() * boardSize);
+        const col = Math.floor(Math.random() * boardSize);
+        if (!board[row][col].mine) {
+            board[row][col].mine = true;
+            mineLocations.push({ row, col });
+            minesPlaced++;
+        }
+    }
+
+    for (let row = 0; row < boardSize; row++) {
+        for (let col = 0; col < boardSize; col++) {
+            if (!board[row][col].mine) {
+                const adjacentMines = getAdjacentCells(row, col).filter(cell => cell.mine).length;
+                board[row][col].adjacentMines = adjacentMines;
+            }
+        }
+    }
+
+    renderBoard();
+}
+
+function getAdjacentCells(row, col) {
+    const cells = [];
+    for (let r = -1; r <= 1; r++) {
+        for (let c = -1; c <= 1; c++) {
+            if (r === 0 && c === 0) continue;
+            const newRow = row + r;
+            const newCol = col + c;
+            if (newRow >= 0 && newRow < boardSize && newCol >= 0 && newCol < boardSize) {
+                cells.push({ row: newRow, col: newCol, ...board[newRow][newCol] });
+            }
+        }
+    }
+    return cells;
+}
+
+function renderBoard() {
+    gameBoard.innerHTML = '';
+    for (let row = 0; row < boardSize; row++) {
+        for (let col = 0; col < boardSize; col++) {
+            const cell = document.createElement('div');
+            cell.classList.add('cell');
+            if (board[row][col].revealed) {
+                cell.classList.add('revealed');
+                if (board[row][col].mine) {
+                    cell.classList.add('mine');
+                    cell.textContent = '💣';
+                } else if (board[row][col].adjacentMines > 0) {
+                    cell.textContent = board[row][col].adjacentMines;
+                }
+            }
+            if (board[row][col].flag) {
+                cell.classList.add('flag');
+                cell.textContent = '🚩';
+            }
+            cell.addEventListener('click', () => onCellClick(row, col));
+            cell.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                onCellRightClick(row, col);
+            });
+            gameBoard.appendChild(cell);
+        }
+    }
+}
+
+function onCellClick(row, col) {
+    if (gameOver || board[row][col].revealed || board[row][col].flag) return;
+    revealCell(row, col);
+    if (board[row][col].mine) {
+        alert('Game Over! You hit a mine.');
+        revealAllMines();
+        gameOver = true;
+    } else {
+        if (board[row][col].adjacentMines === 0) {
+            revealAdjacentCells(row, col);
+        }
+        if (checkWin()) {
+            statusElement.textContent = 'YOU WON!';
+            gameOver = true;
+        }
+    }
+    renderBoard();
+}
+
+function onCellRightClick(row, col) {
+    if (gameOver || board[row][col].revealed) return;
+    board[row][col].flag = !board[row][col].flag;
+    renderBoard();
+}
+
+function revealCell(row, col) {
+    if (board[row][col].revealed) return;
+    board[row][col].revealed = true;
+}
+
+function revealAdjacentCells(row, col) {
+    getAdjacentCells(row, col).forEach(cell => {
+        if (!cell.revealed && !cell.flag) {
+            revealCell(cell.row, cell.col);
+            if (cell.adjacentMines === 0) {
+                revealAdjacentCells(cell.row, cell.col);
+            }
+        }
+    });
+}
+
+function revealAllMines() {
+    mineLocations.forEach(({ row, col }) => {
+        board[row][col].revealed = true;
+    });
+    renderBoard();
+}
+
+function checkWin() {
+    for (let row = 0; row < boardSize; row++) {
+        for (let col = 0; col < boardSize; col++) {
+            if (!board[row][col].mine && !board[row][col].revealed) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+restartButton.addEventListener('click', initBoard);
+
+initBoard();
+mineCountElement.textContent = mineCount;
diff --git a/Games/MineSweeper_Easy/style.css b/Games/MineSweeper_Easy/style.css
@@ -0,0 +1,71 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #1e1e1e;
+    color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+li{
+    text-align: left;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.instructions {
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+#status {
+    margin-bottom: 20px;
+    font-size: 1.5em;
+    color: lime;
+}
+
+#gameBoard {
+    display: grid;
+    grid-template-columns: repeat(10, 40px);
+    grid-template-rows: repeat(10, 40px);
+    gap: 2px;
+}
+
+.cell {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #333;
+    border: 1px solid #555;
+    cursor: pointer;
+}
+
+.cell.revealed {
+    background-color: #444;
+    cursor: default;
+}
+
+.cell.mine {
+    background-color: red;
+}
+
+.cell.flag {
+    background-color: yellow;
+}
+
+button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 1em;
+    cursor: pointer;
+    border: none;
+    background-color: #444;
+    color: #f0f0f0;
+    border-radius: 5px;
+}
diff --git a/README.md b/README.md
@@ -201,7 +201,7 @@ This repository also provides one such platforms where contributers come over an
 | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) |
 | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [DoraemonRun ](https://github.com/kunjgit/GameZone/tree/main/Games/DoraemonRun) |
 | [Memory_Cards_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Cards_Game) |
-| [Typing_Speed_Test2](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test2) | [Tic Tac Toe Responsive ](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_tac_toe_responsive) |
+| [Typing_Speed_Test2](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test2) | [Tic Tac Toe Responsive ](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_tac_toe_responsive) | [Minesweeper Easy ](https://github.com/kunjgit/GameZone/tree/main/Games/MineSweeper_Easy) | 
 | [Technical_Mind_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Technical_Mind_Game) |
 [Slide_Master_Puzzle](https://github.com/kunjgit/GameZone/tree/Main/Games/Slide_Master_Puzz)| |
 | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [Letter_Sleuth](https://github.com/swetha5157/GameZone/tree/main/Games/Letter_Sleuth)

diff --git a/assets/images/MineSweeper_Easy.png b/assets/images/MineSweeper_Easy.png