经典扫雷游戏开发全解析：HTML+CSS+JavaScript实现

最新推荐文章于 2026-06-16 21:04:58 发布
原创 最新推荐文章于 2026-06-16 21:04:58 发布 · 2.1k 阅读 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
cknow-ai TengMMVP

cknow-ai 关注

标签
#html #css #javascript
分类 前端开发

扫雷游戏界面

一、游戏概述

本教程将完整呈现如何用原生前端三剑客（HTML+CSS+JavaScript）实现经典扫雷游戏。该实现包含以下核心功能：

  • 💥 智能雷区生成：10x10格子随机分布10个地雷
  • 🚩 标记功能：右键标记可疑地雷位置
  • 🔍 智能展开：自动展开相邻安全区域
  • 🎨 视觉反馈：数字颜色区分/爆炸动画/胜利特效
  • 📊 状态显示：实时显示剩余雷数与游戏状态

二、代码结构解析

1. 界面布局（HTML）

<div class="game-container">
    <div class="game-title">扫雷游戏</div>
    <div class="controls">
        <button class="new-game-btn" onclick="initGame()">新游戏</button>
        <div class="mines-counter">
            💣 剩余地雷: <span id="mines-count">10</span>
        </div>
    </div>
    <div id="board" class="board"></div>
    <div id="status" class="status"></div>
</div>

2. 视觉设计（CSS）

亮点特性：

/* 现代渐变背景 */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

/* 立体卡片效果 */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

/* 数字颜色编码 */
.cell[data-number="1"] { color: #2196F3; }

/* 交互动画 */
transition: all 0.2s ease;

3. 游戏逻辑（JavaScript）

核心算法流程图：

左键点击
右键点击
是
否
初始化游戏
生成雷区
计算相邻雷数
渲染棋盘
玩家操作
揭示格子
标记旗帜
是否触雷?
游戏失败
检查胜利条件

三、功能亮点详解

1. 雷区生成算法

// 随机放置地雷
let minesPlaced = 0;
while (minesPlaced < MINES_COUNT) {
    const x = Math.floor(Math.random() * BOARD_SIZE);
    const y = Math.floor(Math.random() * BOARD_SIZE);
    if (board[x][y] !== -1) {
        board[x][y] = -1;
        minesPlaced++;
    }
}

// 计算相邻雷数
function countAdjacentMines(x, y) {
    let count = 0;
    for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
            const newX = x + i;
            const newY = y + j;
            if (isValidPosition(newX, newY) && board[newX][newY] === -1) {
                count++;
            }
        }
    }
    return count;
}

2. 递归展开算法

function reveal(x, y) {
    if (越界或已揭示) return;
    
    revealed[x][y] = true;
    remainingCells--;
    
    if (当前格子为空白) {
        // 递归展开相邻8个格子
        for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
                reveal(x + i, y + j);
            }
        }
    }
}

四、游戏操作指南

  1. 左键点击：揭示格子
  2. 右键点击：标记/取消标记地雷
  3. 新游戏按钮：重置游戏
  4. 胜利条件：正确标记所有地雷并揭示所有安全格子
  5. 失败条件：点击到地雷格子

五、扩展优化建议

  1. 难度分级：通过修改常量实现

    // 初级
const BOARD_SIZE = 10;
const MINES_COUNT = 10;

// 中级
const BOARD_SIZE = 16;
const MINES_COUNT = 40;

// 高级
const BOARD_SIZE = 24;
const MINES_COUNT = 99;

  2. 音效增强：添加点击/爆炸/胜利音效

  3. 排行榜系统：记录最佳通关时间

  4. 移动端适配：添加触屏事件支持

六、完整源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>扫雷游戏</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            font-family: "Microsoft YaHei", sans-serif;
        }

        .game-container {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .game-title {
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 1rem;
            font-weight: bold;
        }

        .controls {
            background: #f8f9fa;
            padding: 1rem 2rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .new-game-btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .new-game-btn:hover {
            background: #45a049;
            transform: translateY(-2px);
        }

        .mines-counter {
            background: #2c3e50;
            color: #fff;
            padding: 0.8rem 1.5rem;
            border-radius: 8px;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .mines-counter span {
            color: #ffd700;
            font-weight: bold;
        }

        .board {
            display: grid;
            grid-template-columns: repeat(10, 40px);
            grid-template-rows: repeat(10, 40px);
            gap: 2px;
            background-color: #34495e;
            padding: 3px;
            border-radius: 10px;
        }

        .cell {
            width: 40px;
            height: 40px;
            background: linear-gradient(145deg, #f0f0f0, #e6e6e6);
            border: none;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.2s ease;
        }

        .cell:hover:not(.revealed) {
            background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
            transform: scale(0.95);
        }

        .cell.revealed {
            background: #fff;
            box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);
        }

        .cell.flagged {
            background: linear-gradient(145deg, #ffd700, #ffc800);
        }

        .cell.mine {
            background: #ff5252 !important;
        }

        .status {
            margin-top: 1.5rem;
            padding: 1rem;
            border-radius: 8px;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            min-height: 3rem;
            display: flex;
            align-items: center;
        }

        .game-over {
            color: #ff5252;
            animation: shake 0.5s ease-in-out;
        }

        .win {
            color: #4CAF50;
            animation: bounce 0.5s ease-in-out;
        }

        /* 数字颜色 */
        .cell[data-number="1"] { color: #2196F3; }
        .cell[data-number="2"] { color: #4CAF50; }
        .cell[data-number="3"] { color: #f44336; }
        .cell[data-number="4"] { color: #9C27B0; }
        .cell[data-number="5"] { color: #FF9800; }
        .cell[data-number="6"] { color: #009688; }
        .cell[data-number="7"] { color: #795548; }
        .cell[data-number="8"] { color: #607D8B; }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game-title">扫雷游戏</div>
        <div class="controls">
            <button class="new-game-btn" onclick="initGame()">新游戏</button>
            <div class="mines-counter">
                💣 剩余地雷: <span id="mines-count">10</span>
            </div>
        </div>
        <div id="board" class="board"></div>
        <div id="status" class="status"></div>
    </div>

    <script>
        const BOARD_SIZE = 10;
        const MINES_COUNT = 10;
        let board = [];
        let revealed = [];
        let flagged = [];
        let gameOver = false;
        let remainingCells = BOARD_SIZE * BOARD_SIZE - MINES_COUNT;

        function initGame() {
            board = [];
            revealed = [];
            flagged = [];
            gameOver = false;
            remainingCells = BOARD_SIZE * BOARD_SIZE - MINES_COUNT;
            document.getElementById('mines-count').textContent = MINES_COUNT;
            document.getElementById('status').textContent = '';
            document.getElementById('status').className = 'status';

            // 初始化面板
            for (let i = 0; i < BOARD_SIZE; i++) {
                board[i] = new Array(BOARD_SIZE).fill(0);
                revealed[i] = new Array(BOARD_SIZE).fill(false);
                flagged[i] = new Array(BOARD_SIZE).fill(false);
            }

            // 随机放置地雷
            let minesPlaced = 0;
            while (minesPlaced < MINES_COUNT) {
                const x = Math.floor(Math.random() * BOARD_SIZE);
                const y = Math.floor(Math.random() * BOARD_SIZE);
                if (board[x][y] !== -1) {
                    board[x][y] = -1;
                    minesPlaced++;
                }
            }

            // 计算每个格子周围的地雷数
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    if (board[i][j] !== -1) {
                        board[i][j] = countAdjacentMines(i, j);
                    }
                }
            }

            renderBoard();
        }

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

        function renderBoard() {
            const boardElement = document.getElementById('board');
            boardElement.innerHTML = '';

            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.x = i;
                    cell.dataset.y = j;
                    
                    if (revealed[i][j]) {
                        cell.classList.add('revealed');
                        if (board[i][j] === -1) {
                            cell.classList.add('mine');
                            cell.textContent = '💣';
                        } else if (board[i][j] > 0) {
                            cell.textContent = board[i][j];
                            cell.dataset.number = board[i][j];
                        }
                    } else if (flagged[i][j]) {
                        cell.classList.add('flagged');
                        cell.textContent = '🚩';
                    }

                    cell.addEventListener('click', handleClick);
                    cell.addEventListener('contextmenu', handleRightClick);
                    boardElement.appendChild(cell);
                }
            }
        }

        function handleClick(e) {
            if (gameOver) return;
            const x = parseInt(e.target.dataset.x);
            const y = parseInt(e.target.dataset.y);

            if (flagged[x][y]) return;

            if (board[x][y] === -1) {
                gameOver = true;
                revealAll();
                document.getElementById('status').textContent = '游戏结束!💥';
                document.getElementById('status').className = 'status game-over';
                return;
            }

            reveal(x, y);
            renderBoard();

            if (remainingCells === 0) {
                gameOver = true;
                document.getElementById('status').textContent = '恭喜你赢了!🎉';
                document.getElementById('status').className = 'status win';
            }
        }

        function handleRightClick(e) {
            e.preventDefault();
            if (gameOver) return;

            const x = parseInt(e.target.dataset.x);
            const y = parseInt(e.target.dataset.y);

            if (revealed[x][y]) return;

            flagged[x][y] = !flagged[x][y];
            let minesLeft = MINES_COUNT - countFlags();
            document.getElementById('mines-count').textContent = minesLeft;
            renderBoard();
        }

        function countFlags() {
            return flagged.reduce((count, row) => 
                count + row.reduce((sum, cell) => sum + (cell ? 1 : 0), 0), 0);
        }

        function reveal(x, y) {
            if (x < 0 || x >= BOARD_SIZE || y < 0 || y >= BOARD_SIZE || revealed[x][y] || flagged[x][y]) return;

            revealed[x][y] = true;
            remainingCells--;

            if (board[x][y] === 0) {
                for (let i = -1; i <= 1; i++) {
                    for (let j = -1; j <= 1; j++) {
                        reveal(x + i, y + j);
                    }
                }
            }
        }

        function revealAll() {
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    revealed[i][j] = true;
                }
            }
            renderBoard();
        }

        // 初始化游戏
        initGame();
    </script>
</body>
</html>
点赞 点赞 4
评论 0
书签 书签 7
原生JS网页版的扫雷小游戏代码源码.rar
01-27
原生JS网页版的扫雷小游戏代码源码
js实现简单扫雷
10-14
主要为大家详细介绍了js实现简单扫雷，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS扫雷小游戏(DOM (html+css+js))
路漫漫其修远兮，吾将上下而求索。
11-11 2714
JS扫雷小游戏
javaScript开发扫雷游戏
oldfish_的博客
11-19 2173
扫雷是windows自带的游戏，本文讲解如何通过JavaScript制作扫雷游戏。
扫雷小游戏-原生js实现
weixin_55705650的博客
06-27 768
js实现简单扫雷小游戏
html版扫雷,js扫雷,拷贝代码即可使用,javascript扫雷
dawnStart的博客
03-15 550
【代码】html版扫雷,js扫雷,拷贝代码即可使用,javascript扫雷。
扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏
interest_ing_的博客
03-11 4068
在这篇文章中，我们将一起学习如何使用HTML5和JavaScript来制作一个经典的扫雷小游戏。通过这个教程，你将了解如何创建游戏界面、处理用户交互以及实现游戏逻辑。即使你是编程新手，也能跟随步骤完成这个项目。
纯JS实现简易扫雷小游戏网页项目
weixin_45007812的博客
06-19 4237
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了...
html实现扫雷小游戏(附源码)
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
11-17 9936
html实现扫雷小游戏(附源码)，html扫雷小游戏，仿制windows xp系统自带的扫雷应用的网页版，使用html+js+css实现。实现了应用版扫雷的基本功能。
JavaScript实现经典扫雷游戏开发教程
weixin_42601547的博客
09-11 1146
在布雷完成后，我们需要为每个非雷格子计算其周围的雷数。这一步是生成数字提示的基础。graph TDA[初始化二维数组] --> B[随机布雷]B --> C[计算每个格子周围雷的数量]C --> D[生成完整地图数据]流程说明- 第一步初始化二维数组，为所有格子设置默认状态；- 第二步随机布雷，标记出地雷位置；- 第三步遍历所有非雷格子，计算其周围8个方向的雷数；- 第四步完成地图构建，为后续游戏逻辑提供数据支撑。.cell {
JS：扫雷
weixin_50517811的博客
07-01 744
js扫雷（1） html创建基本框架、CSS为其添加样式。（2） 扫雷盒子中的方块由js创建。（3） js完成扫雷基本操作。
js实现扫雷小程序的示例代码
11-28
初学javascript，写了一个扫雷程序练练手！ 扫雷规则及功能 扫雷想必大家都不陌生，就是windows上点击排雷的小游戏，它的主要规则有 1.左键点击显示当前格子是否为雷，如果为雷的话，GameOver啦，如果不是雷的话，这个格子会显示周围八个格子内的雷数量。 2.鼠标右键标记，标记可能的雷，标记了之后取消需要再次右键点击该格子，左键无效果。 3.鼠标中键（滚轮）按下后，快捷扫雷（如果周围雷数和未被标记且未被翻开的格子相等，会将这些格子一并翻开） 主要功能基本完全复刻了windows7扫雷的功能 扫雷github地址：扫雷github地址 扫雷算法 1.首先我定义了一个构造
扫雷小游戏 JS与react实现
m0_62899372的博客
07-21 330
扫雷小游戏，通过JavaScript与React实现，代码完整已验证，可完成插旗，出现地雷，某块附近地雷数量等功能，
JS实现扫雷游戏（源代码带注释）
weixin_46019681的博客
10-04 3761
JS实现简单的扫雷游戏（源代码带注释）可以直接运行
JavaScript实现扫雷游戏（简易版）(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 404
JavaScript实现扫雷游戏（简易版）(附完整源码)
给我用JS编写一个扫雷的游戏代码
weixin_35748962的博客
02-12 368
当然可以！以下是一份简单的 JavaScript 代码，实现了扫雷游戏的基本功能： ``` const width = 9; const height = 9; const bombs = 10; let board = []; let revealed = []; // 初始化棋盘 for (let i = 0; i < height; i++) { board[i] = []; ...
js实现一个简单的扫雷
风天语的博客
03-16 2909
2. 我们使用类来完成相应功能 3. 之后我们则是要定义一个地图 这里我们使用二维数组来实现，其中有一点需要注意，在扫雷当中对于边角，边缘，内部的布雷方式是不同，即在内部单元格周围一圈最多可以有8个雷，但在边缘或者边角的话最多就只有5个甚至是3个雷，为了以后在布雷时更方便的对此单元格进行校验（判断周围一圈的雷的数量是否合理，在边角，在边缘，在内部三种情况都需要进行单独判断）我们在定义地图时需要额外再扩大一层，比如我们界面当中的地图是5 * 5的，但我们在定义时的二维数组是6 * 6的，这么做的话我们巧妙地
原生JS手写扫雷小游戏
共同进步
08-11 1147
实现一个完整的扫雷游戏需要一些复杂的逻辑和界面交互。我将为你提供一个简化版的扫雷游戏示例，帮助你入门。请注意，这只是一个基本示例，你可以根据自己的需求进行扩展和改进。
无限森林漫游（简约几何版 html
最新发布
a111776的博客
06-16 196
Infinite Forest​ 是一个基于 Three.js 与 Vite 构建的轻量级程序化森林探索演示。项目致力于在浏览器中营造“漫步无尽林间”的沉浸式体验，全程无需加载外部 3D 模型或纹理素材。依托 Perlin 噪声生成起伏草甸，结合实例化渲染（Instancing）高效绘制树木与花草，即使在较大视野下也能保持流畅帧率。演示包含第一人称移动、鼠标视角操控、冲刺跳跃及动态光影雾效，完美还原静谧自然的森林氛围。代码结构精简，逻辑集中，注重性能优化与生成算法的确定性，适合作为 WebGL 程序化生成、
python-114-基于Go.js可视化(二)使用python生成html文件
qq_20466211的博客
06-15 177
使用python脚本自动化生成可视化的html文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值