js网页版扫雷代码

扫雷是一款经典的桌面游戏，玩家需要在一个网格中找出所有非雷的格子，同时避免触雷。下面是一个简单的JavaScript网页版扫雷游戏的实现代码。

基础概念

网格（Grid）：游戏的基本结构，通常是一个二维数组。
雷（Mine）：隐藏在网格中的特殊格子，触碰会导致游戏失败。
数字格子（Number Cell）：显示周围雷的数量的格子。
空白格子（Empty Cell）：周围没有雷的格子。

优势

简单直观：游戏规则简单，易于上手。
逻辑清晰：通过编程实现，可以锻炼逻辑思维能力。
可扩展性强：可以根据需要调整网格大小和雷的数量。

类型

经典扫雷：固定大小的网格，随机分布雷。
自定义扫雷：允许玩家自定义网格大小和雷的数量。

应用场景

休闲娱乐：适合在闲暇时放松心情。
教学工具：用于教授基本的编程概念和算法。

示例代码

以下是一个简单的JavaScript网页版扫雷游戏的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            gap: 2px;
        }
        .cell {
            width: 30px;
            height: 30px;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .cell.revealed {
            background-color: #fff;
        }
        .cell.mine {
            background-color: red;
        }
        .cell.number {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="game" class="grid"></div>
    <script>
        const gridSize = 10;
        const mineCount = 10;
        const gameGrid = document.getElementById('game');
        let grid = createGrid(gridSize, mineCount);

        function createGrid(size, mines) {
            let grid = [];
            for (let i = 0; i < size; i++) {
                grid[i] = [];
                for (let j = 0; j < size; j++) {
                    grid[i][j] = { isMine: false, isRevealed: false, adjacentMines: 0 };
                }
            }
            placeMines(grid, mines);
            calculateAdjacentMines(grid);
            return grid;
        }

        function placeMines(grid, mines) {
            let placed = 0;
            while (placed < mines) {
                let x = Math.floor(Math.random() * gridSize);
                let y = Math.floor(Math.random() * gridSize);
                if (!grid[x][y].isMine) {
                    grid[x][y].isMine = true;
                    placed++;
                }
            }
        }

        function calculateAdjacentMines(grid) {
            for (let i = 0; i < gridSize; i++) {
                for (let j = 0; j < gridSize; j++) {
                    if (!grid[i][j].isMine) {
                        grid[i][j].adjacentMines = countAdjacentMines(grid, i, j);
                    }
                }
            }
        }

        function countAdjacentMines(grid, x, y) {
            let count = 0;
            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    let newX = x + i;
                    let newY = y + j;
                    if (newX >= 0 && newX < gridSize && newY >= 0 && newY < gridSize && grid[newX][newY].isMine) {
                        count++;
                    }
                }
            }
            return count;
        }

        function renderGrid(grid) {
            gameGrid.innerHTML = '';
            for (let i = 0; i < gridSize; i++) {
                for (let j = 0; j < gridSize; j++) {
                    let cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.x = i;
                    cell.dataset.y = j;
                    cell.addEventListener('click', () => revealCell(grid, i, j));
                    gameGrid.appendChild(cell);
                }
            }
        }

        function revealCell(grid, x, y) {
            if (grid[x][y].isRevealed) return;
            grid[x][y].isRevealed = true;
            let cell = gameGrid.children[x * gridSize + y];
            cell.classList.add('revealed');
            if (grid[x][y].isMine) {
                cell.classList.add('mine');
                alert('Game Over!');
                resetGame();
            } else if (grid[x][y].adjacentMines === 0) {
                for (let i = -1; i <= 1; i++) {
                    for (let j = -1; j <= 1; j++) {
                        let newX = x + i;
                        let newY = y + j;
                        if (newX >= 0 && newX < gridSize && newY >= 0 && newY < gridSize) {
                            revealCell(grid, newX, newY);
                        }
                    }
                }
            } else {
                cell.textContent = grid[x][y].adjacentMines;
            }
        }

        function resetGame() {
            grid = createGrid(gridSize, mineCount);
            renderGrid(grid);
        }

        renderGrid(grid);
    </script>
</body>
</html>