网页版扫雷小游戏制作过程(附全部源码)

游戏概述

这款扫雷小游戏是基于HTML、CSS和JavaScript开发的经典扫雷游戏网页版，具有精美的界面设计和流畅的游戏体验。游戏遵循传统扫雷规则，同时增加了多种难度级别和现代化的视觉效果。

游戏布局

1.五种难度级别：

初级：9×9网格，10个地雷
中级：16×16网格，40个地雷
高级：16×30网格，99个地雷
专家：20×30网格，150个地雷
大师：20×40网格，200个地雷

2.UI设计简洁美观：

平滑的动画过渡
响应式布局适配不同设备
直观的颜色编码数字

3.游戏机制：

第一次点击必定安全
右键标记可疑地雷
自动展开空白区域
实时计时和剩余地雷计数

动画展示

技术亮点

纯客户端实现：整个游戏仅使用HTML、CSS和JavaScript实现，无需服务器支持，可在任何现代浏览器中运行。

高效的算法设计：地雷生成使用随机算法并确保第一次点击安全；空白区域展开使用递归算法实现洪水填充效果。

状态管理：使用JavaScript对象集中管理游戏状态，保持数据与UI同步。

事件处理：合理使用事件委托技术高效处理大量格子元素的点击事件。

CSS Grid布局：利用现代CSS布局方案灵活构建游戏板，适应不同难度级别的网格尺寸。

CSS Grid深度应用游戏板的动态网格布局实现grid-template-columns: repeat(${cols}, 1fr) 动态列数控制网格项的自适应尺寸处理

Flexbox辅助布局主菜单和按钮组的居中布局游戏信息区域的空间分布响应式调整时的弹性布局

动画与过渡效果，@keyframes 实现界面淡入效果transition 处理按钮悬停状态性能优化的动画实现方式

DOM高效操作，动态创建游戏板元素批量DOM操作优化事件委托的应用实践

模块化代码组织，游戏逻辑与UI渲染分离功能函数的单一职责原则状态管理与视图更新的清晰边界

响应式设计体系，移动端适配策略，媒体查询的合理使用触控与鼠标事件的兼容处理

性能优化实践，计时器的高效管理，游戏板渲染的性能考量，内存泄漏预防措施

游戏核心设计机制

游戏的核心设计围绕着"逻辑推理"与"概率判断"展开。玩家需要在一个矩形网格中，通过点击格子来逐步揭示安全区域，同时避免触雷。每个被点开的格子会显示一个数字，表示周围8个格子中存在的地雷数量。基于这些数字信息，玩家需要运用逻辑推理来判断哪些格子必定是地雷（用旗帜标记），哪些格子必定安全（可以放心点击）。

游戏引入了"第一次点击必定安全"的扫雷标准机制。当玩家点击一个没有任何相邻地雷的空白格子时，游戏会自动展开所有相连的空白区域，这一机制显著减少了早期扫雷游戏中常见的"盲目猜测"情况，使游戏更加注重逻辑推理而非运气。

部分核心代码分析

游戏状态管理

const gameState = {
    level: 1,
    board: [],
    mineCount: 0,
    revealedCount: 0,
    flaggedCount: 0,
    gameOver: false,
    gameWon: false,
    firstClick: true,
    startTime: 0,
    timerInterval: null,
    elapsedTime: 0,
    levels: [
        { rows: 9, cols: 9, mines: 10 },   // 初级
        { rows: 16, cols: 16, mines: 40 },  // 中级
        { rows: 16, cols: 30, mines: 99 },  // 高级
        { rows: 20, cols: 30, mines: 150 }, // 专家
        { rows: 20, cols: 40, mines: 200 }  // 大师
    ]
};

这段代码定义了游戏的核心状态对象，包含：

当前游戏难度级别
游戏板二维数组
地雷总数和已标记数
游戏进行状态
计时器相关变量
五个预设难度级别的配置

游戏板初始化

function createBoard() {
    const level = gameState.levels[gameState.level - 1];
    gameState.board = [];
    
    elements.gameBoard.innerHTML = '';
    elements.gameBoard.style.gridTemplateColumns = `repeat(${level.cols}, 1fr)`;

    for (let row = 0; row < level.rows; row++) {
        gameState.board[row] = [];
        for (let col = 0; col < level.cols; col++) {
            gameState.board[row][col] = {
                isMine: false,
                revealed: false,
                flagged: false,
                neighborMines: 0
            };

            const cell = document.createElement('div');
            cell.className = 'cell';
            cell.dataset.row = row;
            cell.dataset.col = col;

            cell.addEventListener('click', () => handleCellClick(row, col));
            cell.addEventListener('contextmenu', (e) => {
                e.preventDefault();
                handleRightClick(row, col);
            });

            elements.gameBoard.appendChild(cell);
        }
    }
}

根据选定的难度级别创建游戏板
使用CSS Grid布局设置游戏板列数
初始化二维数组表示游戏状态
为每个格子创建DOM元素并添加事件监听

地雷放置算法

function placeMines(firstRow, firstCol) {
    const level = gameState.levels[gameState.level - 1];
    let minesPlaced = 0;
    
    // 确保第一次点击的格子及其周围没有地雷
    const safeZone = [];
    for (let r = Math.max(0, firstRow - 1); r <= Math.min(level.rows - 1, firstRow + 1); r++) {
        for (let c = Math.max(0, firstCol - 1); c <= Math.min(level.cols - 1, firstCol + 1); c++) {
            safeZone.push(`${r},${c}`);
        }
    }

    // 随机放置地雷
    while (minesPlaced < level.mines) {
        const row = Math.floor(Math.random() * level.rows);
        const col = Math.floor(Math.random() * level.cols);

        if (!safeZone.includes(`${row},${col}`) && !gameState.board[row][col].isMine) {
            gameState.board[row][col].isMine = true;
            minesPlaced++;
        }
    }

    calculateNeighborMines();
    startTimer();
}

1. 在玩家第一次点击后放置地雷
2. 确保第一次点击位置周围3×3区域安全
3. 随机分布剩余地雷
4. 计算每个格子周围的地雷数
5. 启动游戏计时器

点击格子逻辑

function revealCell(row, col) {
    const level = gameState.levels[gameState.level - 1];

    if (row < 0 || row >= level.rows || col < 0 || col >= level.cols ||
        gameState.board[row][col].revealed || gameState.board[row][col].flagged) {
        return;
    }

    gameState.board[row][col].revealed = true;
    gameState.revealedCount++;

    const cellElement = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
    cellElement.classList.add('revealed');

    if (gameState.board[row][col].neighborMines > 0) {
        cellElement.textContent = gameState.board[row][col].neighborMines;
        cellElement.classList.add(`number-${gameState.board[row][col].neighborMines}`);
        return;
    }

    // 递归揭开空白区域
    for (let r = Math.max(0, row - 1); r <= Math.min(level.rows - 1, row + 1); r++) {
        for (let c = Math.max(0, col - 1); c <= Math.min(level.cols - 1, col + 1); c++) {
            if (r !== row || c !== col) {
                revealCell(r, c);
            }
        }
    }
}

边界检查和状态验证
标记格子为已揭开
显示数字（如果有周围地雷）