Minesweeper

91 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minesweeper</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fafafa;
            margin: 0;
            padding: 20px;
        }

h1 {
            color: #333;
            margin-bottom: 10px;
        }

#game-info {
            margin-bottom: 15px;
            font-size: 18px;
            font-weight: bold;
        }

/* The grid uses CSS Grid layout */
        #board {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            grid-template-rows: repeat(10, 30px);
            gap: 2px;
            background-color: #bbb;
            padding: 5px;
            border-radius: 4px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            user-select: none;
        }

/* Individual cell styles */
        .cell {
            width: 30px;
            height: 30px;
            background-color: #e0e0e0;
            border: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            border-radius: 2px;
        }

.cell:hover {
            background-color: #d5d5d5;
        }

/* Cell states controlled by JS classes */
        .cell.revealed {
            background-color: #bdbdbd;
            border: 1px solid #9e9e9e;
            cursor: default;
        }

.cell.mine {
            background-color: #f44336;
        }

.cell.flagged {
            background-color: #ffeb3b;
        }

/* Number coloring rules matching classic Minesweeper rules */
        .num-1 { color: #0000ff; }
        .num-2 { color: #008000; }
        .num-3 { color: #ff0000; }
        .num-4 { color: #000080; }
        .num-5 { color: #800000; }
        .num-6 { color: #008080; }
        .num-7 { color: #000000; }
        .num-8 { color: #808080; }

button {
            margin-top: 15px;
            padding: 8px 16px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
        }

button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<h1>Minesweeper</h1>
    <div id="game-info">Mines: <span id="mine-count">10</span> | <span id="status">Good Luck!</span></div>
    <div id="board"></div>
    <button onclick="resetGame()">Restart Game</button>

let board = [];
        let gameOver = false;
        let revealedCellsCount = 0;

const boardElement = document.getElementById('board');
        const statusElement = document.getElementById('status');
        const mineCountElement = document.getElementById('mine-count');

// Core Object construction for each cell tracking internal state
        class Cell {
            constructor(row, col) {
                this.row = row;
                this.col = col;
                this.isMine = false;
                this.isRevealed = false;
                this.isFlagged = false;
                this.neighborMines = 0;
                this.element = null;
            }
        }

function createBoard() {
            boardElement.innerHTML = '';
            board = [];
            gameOver = false;
            revealedCellsCount = 0;
            statusElement.textContent = "Good Luck!";
            statusElement.style.color = "black";
            mineCountElement.textContent = MINES_COUNT;

// 1. Initialize empty cell grid matrix
            for (let r = 0; r < ROWS; r++) {
                board[r] = [];
                for (let c = 0; c < COLS; c++) {
                    const cell = new Cell(r, c);
                    
                    // Create DOM structure representation 
                    const cellEl = document.createElement('div');
                    cellEl.classList.add('cell');
                    
                    // Bind events for interactions
                    cellEl.addEventListener('click', () => leftClickCell(r, c));
                    cellEl.addEventListener('contextmenu', (e) => {
                        e.preventDefault(); // Stop native browser menu from opening
                        rightClickCell(r, c);
                    });

cell.element = cellEl;
                    boardElement.appendChild(cellEl);
                    board[r][c] = cell;
                }
            }

// 2. Randomly deploy mines on the board layout
            let minesPlaced = 0;
            while (minesPlaced < MINES_COUNT) {
                const r = Math.floor(Math.random() * ROWS);
                const c = Math.floor(Math.random() * COLS);
                
                if (!board[r][c].isMine) {
                    board[r][c].isMine = true;
                    minesPlaced++;
                }
            }

// 3. Pre-calculate adjacency numbers for performance
            for (let r = 0; r < ROWS; r++) {
                for (let c = 0; c < COLS; c++) {
                    if (!board[r][c].isMine) {
                        board[r][c].neighborMines = countAdjacentMines(r, c);
                    }
                }
            }
        }

// Loop through the 8 surrounding fields to add up neighbor bombs
        function countAdjacentMines(row, col) {
            let count = 0;
            for (let dr = -1; dr <= 1; dr++) {
                for (let dc = -1; dc <= 1; dc++) {
                    const nr = row + dr;
                    const nc = col + dc;
                    if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
                        if (board[nr][nc].isMine) count++;
                    }
                }
            }
            return count;
        }

function leftClickCell(row, col) {
            if (gameOver) return;
            const cell = board[row][col];
            if (cell.isRevealed || cell.isFlagged) return;

// Hit a mine = Game Over logic sequence triggered
            if (cell.isMine) {
                revealAllMines();
                endGame(false);
                return;
            }

// Otherwise safely reveal current target cell
            revealCell(row, col);

// Win condition verification: (Total items - Mines) matched perfectly
            if (revealedCellsCount === (ROWS * COLS) - MINES_COUNT) {
                endGame(true);
            }
        }

function rightClickCell(row, col) {
            if (gameOver) return;
            const cell = board[row][col];
            if (cell.isRevealed) return;

// Toggle flagged UI representation
            cell.isFlagged = !cell.isFlagged;
            if (cell.isFlagged) {
                cell.element.classList.add('flagged');
                cell.element.textContent = '🚩';
            } else {
                cell.element.classList.remove('flagged');
                cell.element.textContent = '';
            }
            
            // Dynamic display adjustments tracking operational flag deployment numbers
            const flagsCount = document.querySelectorAll('.cell.flagged').length;
            mineCountElement.textContent = MINES_COUNT - flagsCount;
        }

// Recursive reveal engine auto-expanding blanks instantly
        function revealCell(row, col) {
            const cell = board[row][col];
            if (cell.isRevealed || cell.isFlagged) return;

cell.isRevealed = true;
            cell.element.classList.add('revealed');
            revealedCellsCount++;

if (cell.neighborMines > 0) {
                cell.element.textContent = cell.neighborMines;
                cell.element.classList.add(`num-${cell.neighborMines}`);
            } else {
                // If 0 neighboring mines, safely cascade reveal all adjacent spaces
                for (let dr = -1; dr <= 1; dr++) {
                    for (let dc = -1; dc <= 1; dc++) {
                        const nr = row + dr;
                        const nc = col + dc;
                        if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
                            revealCell(nr, nc);
                        }
                    }
                }
            }
        }

function resetGame() {
            createBoard();
        }

// Initialize board setup sequence automatically upon launch
        createBoard();
    </script>
</body>
</html>

CSS

Comments 0

…