扫雷 HTML版，摸鱼时写的小游戏_html 简单游戏 demo-优快云博客

本文链接：https://blog.youkuaiyun.com/MOWENRAN/article/details/142959868
在工作摸鱼时，用html写的一个扫雷小游戏。可以记分，右键可标记💣。

效果图：
在这里插入图片描述
源码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        #grid {
            display: grid;
            grid-template-columns: repeat(10, 40px);
            grid-gap: 2px;
        }
        .cell {
            width: 40px;
            height: 40px;
            background-color: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
        }
        .revealed {
            background-color: #b0b0b0; /* 加深已揭示单元格的颜色 */
        }
        .mine {
            background-color: red;
        }
        .flag {
            background-color: yellow;
            color: black;
            font-size: 24px;
        }
        #score {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>扫雷游戏</h1>
    <div id="score">得分: 0</div>
    <div>
        <button onclick="startGame()">开始</button>
        <button onclick="pauseGame()">暂停</button>
        <button onclick="restartGame()">重新开始</button>
    </div>
    <div id="grid"></div>

    <script>
        const GRID_SIZE = 10;
        const MINE_COUNT = 10;
        let cells = [];
        let gameOver = false;
        let gameStarted = false;
        let score = 0;

        function createGrid() {
            const grid = document.getElementById("grid");
            grid.innerHTML = '';
            cells = [];
            for (let row = 0; row < GRID_SIZE; row++) {
                const cellRow = [];
                for (let col = 0; col < GRID_SIZE; col++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.addEventListener("click", () => revealCell(row, col));
                    cell.addEventListener("contextmenu", (e) => {
                        e.preventDefault(); // 阻止右键菜单
                        toggleFlag(row, col);
                    });
                    cellRow.push({ element: cell, isMine: false, isRevealed: false, adjacentMines: 0, isFlagged: false });
                    grid.appendChild(cell);
                }
                cells.push(cellRow);
            }
        }

        function startGame() {
            if (!gameStarted) {
                placeMines();
                calculateAdjacentMines();
                gameStarted = true;
                score = 0;
                updateScore();
            }
        }

        function pauseGame() {
            if (gameStarted) {
                gameStarted = false;
                alert("游戏已暂停。");
            }
        }

        function restartGame() {
            gameOver = false;
            gameStarted = false; // 重新开始时，不需要设置为 false
            score = 0;
            updateScore();
            createGrid();
            startGame(); // 直接开始游戏
        }

        function placeMines() {
            let placedMines = 0;
            while (placedMines < MINE_COUNT) {
                const row = Math.floor(Math.random() * GRID_SIZE);
                const col = Math.floor(Math.random() * GRID_SIZE);
                if (!cells[row][col].isMine) {
                    cells[row][col].isMine = true;
                    placedMines++;
                }
            }
        }

        function calculateAdjacentMines() {
            for (let row = 0; row < GRID_SIZE; row++) {
                for (let col = 0; col < GRID_SIZE; col++) {
                    if (!cells[row][col].isMine) {
                        let mineCount = 0;
                        for (let r = row - 1; r <= row + 1; r++) {
                            for (let c = col - 1; c <= col + 1; c++) {
                                if (r >= 0 && r < GRID_SIZE && c >= 0 && c < GRID_SIZE && cells[r][c].isMine) {
                                    mineCount++;
                                }
                            }
                        }
                        cells[row][col].adjacentMines = mineCount;
                    }
                }
            }
        }

        function revealCell(row, col) {
            if (gameOver || !gameStarted) return;

            const cell = cells[row][col];
            if (cell.isRevealed || cell.isFlagged) return;

            cell.isRevealed = true;
            cell.element.classList.add("revealed");

            if (cell.isMine) {
                cell.element.classList.add("mine");
                revealAllMines();
                alert("游戏结束，你踩到地雷了！");
                gameOver = true;
            } else {
                if (cell.adjacentMines > 0) {
                    cell.element.textContent = cell.adjacentMines;
                } else {
                    // 递归揭示周围格子
                    for (let r = row - 1; r <= row + 1; r++) {
                        for (let c = col - 1; c <= col + 1; c++) {
                            if (r >= 0 && r < GRID_SIZE && c >= 0 && c < GRID_SIZE) {
                                revealCell(r, c);
                            }
                        }
                    }
                }
                score++;
                updateScore();
                checkVictory();
            }
        }

        function toggleFlag(row, col) {
            const cell = cells[row][col];
            if (cell.isRevealed) return;

            cell.isFlagged = !cell.isFlagged;
            cell.element.classList.toggle("flag", cell.isFlagged);
            cell.element.textContent = cell.isFlagged ? "🚩" : ""; // 标记为旗帜
        }

        function revealAllMines() {
            for (let row = 0; row < GRID_SIZE; row++) {
                for (let col = 0; col < GRID_SIZE; col++) {
                    if (cells[row][col].isMine) {
                        cells[row][col].element.classList.add("mine");
                    }
                }
            }
        }

        function checkVictory() {
            let revealedCells = 0;
            for (let row = 0; row < GRID_SIZE; row++) {
                for (let col = 0; col < GRID_SIZE; col++) {
                    if (cells[row][col].isRevealed && !cells[row][col].isMine) {
                        revealedCells++;
                    }
                }
            }
            if (revealedCells === (GRID_SIZE * GRID_SIZE - MINE_COUNT)) {
                alert("恭喜你，游戏胜利了！");
                gameOver = true;
            }
        }

        function updateScore() {
            document.getElementById("score").textContent = "得分: " + score;
        }

        // 初始化游戏网格
        createGrid();
    </script>
</body>
</html>