网页扫雷html css js,小游戏：扫雷 前端 H5 + CSS + JS

简介

很久以前刚接触前端的时候做的扫雷小游戏。虽然花了不少时间，但是整个做下来，还是很有收获的。

现在来看代码还是比较一般的，但也是一番心血。

特地分享出来，希望对需要的人有所帮助。适合初学者练习。

运行效果

运行效果

上方的表格左边格子表示剩余雷数，中间选择难度，右边计时。按下空格可以开始新游戏。

游戏中

游戏胜利

游戏失败

主体思路

随机生成雷的分布，用二维数组储存。同时遍历数组，生成数字，表示周围的雷的数目，同样储存在这个二维数组中。

生成div来表示格子，并且绑定一个坐标属性。与二维数组一一对应。

点击格子，根据坐标判断是否点到雷。是雷就游戏结束，不是雷就显示数字。

难点

1.点击到空白处的时候，会自动打开一大片格子。这个效果当时也是研究了很久。

最后的实现方法是：设置一个searched数组，储存已经点击或者查找过的坐标。然后点到空白处的时候，向上、下、左、右、右上、左上、右下、左下八个方向进行深度优先搜索，并将搜索过的格子的坐标储存到searched数组。搜索终止的条件是：遇到searched数组中的坐标，或者遇到数字，或者遇到边界。

(2020.10.3 更新：今天回顾这个代码，发现如果使用广度优先效果会更好，只用向上下左右四个方向搜索。)

2.玩过扫雷的都知道扫雷有一个操作是：在一个数字块上同时按下鼠标的左键和右键，如果操作目标周围插旗的格子数目等于数字的值，那么就能快速打开周围所有未标记的格子。

然而同时按下鼠标的操作js是没有的。

我的解决是方法是，计算鼠标点击的时间，如果2次点击时间间隔很小，那么就认定是同时按下左右键。调试之后，发现时间间隔设置为100毫秒的效果比较好。

代码

扫雷

.grid{

width: 18px;

height: 18px;

background-color: #0066cc;

float: left;

border: 1px black solid;

}

.mine{

width: 18px;

height: 18px;

float: left;

background-image:url(mine.png);

background-size: 18px 18px;

border: 1px black solid;

}

.flag{

width: 18px;

height: 18px;

float: left;

background-image:url(flag.png);

background-size: 18px 18px;

border: 1px black solid;

}

.number{

width: 18px;

height: 18px;

float:left;

text-align: center;

line-height: 20px;

border: 1px black solid;

background-color: palegoldenrod;

font-weight: bold;

}

#box{

height: 200px;

width: 200px;

border