扫雷 HTML版，摸鱼时写的小游戏（二）进阶版

MOWENRAN
于 2024-10-21 18:50:23 发布
阅读量171
点赞数 3
文章标签： html javascript 前端
本文链接：https://blog.youkuaiyun.com/MOWENRAN/article/details/143122474
版权
扫雷进阶版，增加关卡，总积分，一键查看所有雷（双击关闭），样式优化。

在这里插入图片描述
<!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, #level {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>扫雷游戏</h1>
    <div id="score">得分: 0</div>
    <div id="level">当前关卡: 1</div> <!-- 显示当前关卡 -->
    <div>
        <button onclick="startGame()">开始</button>
        <button onclick="pauseGame()">暂停</button>
        <button onclick="restartGame()">重新开始</button>
        <button onclick="toggleMinesVisibility()">显示/隐藏地雷</button>
    </div>
    <div id="grid"></div>

    <script>
        let GRID_SIZE = 10;
        let MINE_COUNT = 10;
        let cells = [];
        let gameOver = false;
        let gameStarted = false;
        let score = 0;
        let wins = 0; // 记录过关次数
        let currentLevel = 1; // 当前关卡
        let minesVisible = false; // 记录是否显示雷

        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);
            }
            updateGridStyle();
        }

        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");
                cell.element.textContent = "💣"; // 显示地雷图标
                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");
                        cells[row][col].element.textContent = "💣"; // 显示地雷图标
                    }
                }
            }
        }

        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)) {
                wins++;
                score += 10; // 胜利后增加分数
                updateScore();
                currentLevel++; // 进入下一个关卡
                document.getElementById("level").textContent = "当前关卡: " + currentLevel; // 更新当前关卡显示
                alert("恭喜你，游戏胜利了！ 过关次数: " + wins);
                increaseDifficulty(); // 增加难度
                restartGame(); // 重新开始游戏
            }
        }

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

        function increaseDifficulty() {
            GRID_SIZE += 2; // 增加棋盘大小
            MINE_COUNT += 2; // 增加雷数
        }

        function toggleMinesVisibility() {
            minesVisible = !minesVisible;
            for (let row = 0; row < GRID_SIZE; row++) {
                for (let col = 0; col < GRID_SIZE; col++) {
                    if (cells[row][col].isMine && minesVisible) {
                        cells[row][col].element.classList.add("mine");
                        cells[row][col].element.textContent = "💣"; // 显示地雷图标
                    } else {
                        cells[row][col].element.classList.remove("mine");
                        cells[row][col].element.textContent = ""; // 隐藏地雷图标
                    }
                }
            }
        }

        // 更新网格样式
        function updateGridStyle() {
            const grid = document.getElementById("grid");
            grid.style.gridTemplateColumns = `repeat(${GRID_SIZE}, 40px)`;
        }

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