扫雷游戏js代码

扫雷游戏是一种单人电脑游戏，玩家需要在一个网格中找出所有非雷区格子，并且避免触雷。以下是一个简单的JavaScript实现扫雷游戏的示例代码：

基础概念

网格（Grid）：游戏的主要区域，由多个单元格组成。
地雷（Mine）：隐藏在某些单元格中的危险元素。
数字（Number）：表示周围8个单元格中地雷的数量。
标记（Flag）：玩家用来标记疑似地雷的位置。

优势

简单易懂，适合各个年龄段的玩家。
可以锻炼玩家的逻辑思维和推理能力。
可以自定义难度，适应不同玩家的需求。

类型

经典扫雷：固定大小的网格，固定数量的地雷。
自定义扫雷：允许玩家设置网格大小和地雷数量。

应用场景

桌面应用程序
网页游戏
移动应用

示例代码

以下是一个简单的HTML和JavaScript实现的扫雷游戏：

<!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>
        .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;
        }
    </style>
</head>
<body>
    <div id="game" class="grid"></div>
    <script>
        const gridSize = 10;
        const mineCount = 10;
        const gameGrid = document.getElementById('game');
        let mines = [];
        let revealedCells = [];

        function createGrid() {
            for (let i = 0; i < gridSize * gridSize; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.addEventListener('click', () => revealCell(i));
                gameGrid.appendChild(cell);
            }
        }

        function placeMines() {
            for (let i = 0; i < mineCount; i++) {
                let randomIndex;
                do {
                    randomIndex = Math.floor(Math.random() * (gridSize * gridSize));
                } while (mines.includes(randomIndex));
                mines.push(randomIndex);
            }
        }

        function revealCell(index) {
            if (mines.includes(index)) {
                alert('Game Over! You hit a mine.');
                resetGame();
                return;
            }
            const cell = gameGrid.children[index];
            cell.textContent = getAdjacentMines(index);
            cell.style.backgroundColor = '#fff';
            revealedCells.push(index);
            if (revealedCells.length === gridSize * gridSize - mineCount) {
                alert('Congratulations! You won!');
                resetGame();
            }
        }

        function getAdjacentMines(index) {
            let count = 0;
            const row = Math.floor(index / gridSize);
            const col = index % gridSize;
            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    const newRow = row + i;
                    const newCol = col + j;
                    if (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize) {
                        const adjacentIndex = newRow * gridSize + newCol;
                        if (mines.includes(adjacentIndex)) {
                            count++;
                        }
                    }
                }
            }
            return count > 0 ? count : '';
        }

        function resetGame() {
            mines = [];
            revealedCells = [];
            gameGrid.innerHTML = '';
            createGrid();
            placeMines();
        }

        createGrid();
        placeMines();
    </script>
</body>
</html>