小游戏：扫雷 前端 H5 + CSS + JS

简介

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

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

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

运行效果

运行效果

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

游戏中

游戏胜利

游戏失败

主体思路

随机生成雷的分布，用二维数组储存。同时遍历数组，生成数字，表示周围的雷的数目，同样储存在这个二维数组中。
生成div来表示格子，并且绑定一个坐标属性。与二维数组一一对应。
点击格子，根据坐标判断是否点到雷。是雷就游戏结束，不是雷就显示数字。

难点

1.点击到空白处的时候，会自动打开一大片格子。这个效果当时也是研究了很久。
最后的实现方法是：设置一个searched数组，储存已经点击或者查找过的坐标。然后点到空白处的时候，向上、下、左、右、右上、左上、右下、左下八个方向进行深度优先搜索，并将搜索过的格子的坐标储存到searched数组。搜索终止的条件是：遇到searched数组中的坐标，或者遇到数字，或者遇到边界。
（2020.10.3 更新：今天回顾这个代码，发现如果使用广度优先效果会更好，只用向上下左右四个方向搜索。）

2.玩过扫雷的都知道扫雷有一个操作是：在一个数字块上同时按下鼠标的左键和右键，如果操作目标周围插旗的格子数目等于数字的值，那么就能快速打开周围所有未标记的格子。
然而同时按下鼠标的操作js是没有的。
我的解决是方法是，计算鼠标点击的时间，如果2次点击时间间隔很小，那么就认定是同时按下左右键。调试之后，发现时间间隔设置为100毫秒的效果比较好。

代码

    
        
        
        
    
    
    
        

            

                

                    初级
                    中级
                    高级
                
                
0:0
            
        
        

        按下空格开始新游戏

    

需要用到的图片

mine.png

flag.png

o.png

X.png

图片均来自网络，如果侵权，请联系本人进行删除