应用介绍
生成一张 20×20 的随机布雷图并标出每格周边雷数的网页演示,格子不可点击。
它解决什么问题
如果你搜「在线扫雷」,期待的多半是:点格子、插旗、计时、踩雷就输、清完所有安全格就赢。这个页面目前只做到其中的前半部分——把一张随机生成的雷区分布图铺在屏幕上。
它对两类人还是有用的。一是想看「随机布雷 + 邻雷计数」这段逻辑怎么写的开发者,刷新一下就能拿到一份全新的随机地图;二是需要一张随机雷区分布图做示意图的人,比如出题、做演示、写教程。
但如果你是想用鼠标一格一格推理下去的玩家,这里给不了那种体验:格子点了没有反应,没有插旗、没有计时、也没有胜负判定。这一点在本页里如实说明,避免你带着"玩一局"的预期进来。
核心功能
- 20×20 随机布雷:每张地图 400 格,从中随机选 20 格布雷,雷占 5%;点刷新图标立刻重新生成一张。
- 邻雷计数:对每个非雷格检查周围 8 格,把其中的雷数写进格子;周围没有雷的格子显示一个逗号占位。
- 地图整张直出:所有格子一次性渲染到页面上,雷格直接显示为 9——也就是说雷的位置本身是可见的,不存在"翻开"这一步。
- 两个行合并按钮:底部左右两个箭头会对每一行反复执行"相邻相同值相加"的合并运算,规则与 2048 类方块游戏的行合并一致,与扫雷玩法无关。
- 纯前端生成:不请求任何后端接口,也不保存任何数据。
怎么用
- 1打开
/wit-lab/minesweeper,页面立即生成一张 20×20 的布雷图。 - 2阅读地图:数字格表示它周围 8 格里有几颗雷,显示 9 的格子本身是雷。
- 3点底部中间的刷新图标,重新随机生成一张新地图。
- 4点左右两个箭头,会按行执行相邻值合并运算,可用于观察这段逻辑的运行结果。
- 5关闭页面即结束,重进会重新布雷。
常见问题
Q:为什么点格子没有反应?
A:当前版本没有实现点击翻开。格子只负责显示,页面未做翻开、插旗、计时和胜负判定,所以点上去不会有任何变化。
Q:一共几颗雷?
A:固定 20 颗。棋盘 400 格,雷占 5%。每次刷新重新随机,可能出现分布很集中的情况。
Q:格子里的数字代表什么?
A:代表该格周围 8 格中的雷数。数字越大,说明附近雷越密;显示 9 的格子是雷本身。
Q:底部的左右箭头是做什么的?
A:它执行的是逐行的"相邻相同值合并"运算(与 2048 类方块游戏的合并规则相同),属于页面里遗留的另一套逻辑,不是扫雷操作。
Q:有成绩记录或排行吗?
A:没有。页面不记录时间、不记录点击次数,刷新或重进都会重新生成地图。
适合谁
想了解"随机布雷 + 邻雷计数"实现思路的前端学习者需要一张随机雷区示意图做讲解、出题或演示的人想体验扫雷玩法的玩家(请注意:本页目前无法点击翻开格子,它更像一个地图生成演示)