一个使用纯HTML、CSS和JavaScript实现的经典扫雷游戏。

游戏特点

  • 🎮 经典玩法：与Windows经典扫雷游戏相同的规则和体验

  • 🎚️ 多级难度：提供初级(12x12)、中级(16x16)和高级(19x19)三种难度选择

  • 🎯 第一次点击安全：首次点击永远不会触雷

  • 🚩 标记功能：右键点击可标记可疑的地雷位置

  • 🔢 数字提示：显示周围地雷数量的彩色数字

  • 📱 响应式设计：适配不同屏幕尺寸，包括移动设备

在线体验

🎮 点击这里在线体验游戏

游戏截图

扫雷游戏截图

安装与运行

https://github.com/Forminio/minesweeper-game

克隆仓库：

git clone https://github.com/Forminio/minesweeper-game.git

技术实现详解

1. 游戏核心数据结构

游戏使用两个二维数组作为核心数据结构：

  • mineBoard ：记录每个格子是地雷('M')还是数字(0-8)

  • showBoard ：记录每个格子的显示状态('hidden'、'revealed'、'flag'、'mine')

2. 地雷生成算法

关键实现点：

  • 使用随机数生成地雷位置

  • 确保首次点击位置及其周围8个格子不会有地雷

  • 地雷放置完成后，计算每个非地雷格子周围的地雷数量

3. 自动展开算法（递归实现）

关键实现点：

  • 使用递归算法自动展开空白区域

  • 当点击到数字0（周围无雷）的格子时，自动展开周围的8个格子

  • 递归继续展开，直到遇到数字格子为止

  • 边界检查确保不会越界

4. 胜利检测算法

关键实现点：

  • 计算已揭示的格子数量

  • 当已揭示格子数量等于总格子数减去地雷数时，判定为胜利

  • 胜利时自动标记所有未标记的地雷

5. 渲染与DOM操作

关键实现点：

  • 使用CSS Grid布局实现游戏网格

  • 动态调整网格大小以适应不同难度

  • 为每个单元格添加点击和右键点击事件

  • 根据单元格状态设置不同的样式和内容

6. 响应式设计

关键实现点：

  • 使用媒体查询适配不同屏幕尺寸

  • 在小屏幕设备上调整按钮布局和单元格大小

  • 确保游戏在移动设备上也能良好运行

7. 健壮性与错误处理

关键实现点：

  • 添加多种事件监听确保游戏在各种情况下都能正常运行

  • 定期检查游戏状态，自动修复可能的问题

  • 处理页面可见性变化、缓存加载等特殊情况

设计亮点

  • 经典Windows风格UI ：使用灰色背景、凸起和凹陷的边框，重现经典Windows扫雷游戏的视觉风格

  • 彩色数字提示 ：不同数字使用不同颜色，提高游戏可读性

  • 游戏状态反馈 ：通过模态窗口提供游戏结束反馈，显示游戏结果和用时

  • 自适应布局 ：游戏界面能够适应不同屏幕尺寸，在桌面和移动设备上都有良好体验