原生js实现经典扫雷游戏（含完整源码）

快来打我* 2023-01-21 12:16 6阅读 0赞

## 项目结构 ##

![在这里插入图片描述][20210516015631368.png]

## 实现效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70 1]

## 思路流程 ##

1.  写出基本的布局
2.  利用js生成扫雷的table表格
3.  利用随机数来做地雷在表格中的索引
4.  初始化table表格
5.  根据地雷的坐标生成地雷周围的数字
6.  点击事件分成鼠标左键点击和右键点击
7.  左键点击情况下又分为点到的是地雷和非地雷两种情况
8.  点到的是地雷情况下，则将全部地雷显示，其他样式不变，并且不能再进行任意表格内的点击事件（左键右键都不行）
9.  点到的是非地雷情况下又分为点击的数字是0和非0两种情况
10. 如果是非0，则只需要显示其数字
11. 如果是0，利用递归思想，遍历周围的表格，若为0则继续递归显示0，直到遇到非0停止
12. 接上面的6，若进行右键点击，则显示小红旗，并且剩余地雷数-1
13. 当剩余雷数为0时，判断小红旗底下是否全为地雷，若全是地雷则成功扫雷，否则扫雷失败
14. 为按钮添加功能，分别为9乘以9->10个雷、16乘以16->40个地雷、28乘以28、99个地雷，以及重新开始按钮

## html源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./css/style.css">
    </head>
    
    <body>
        <div class="footer">剩余雷数：<span class="mineNum"></span></div>
        <div class="gameBox">
    
        </div>
        <div class="header">
            <button class="active">初级</button>
            <button>中级</button>
            <button>高级</button>
            <button>重新开始</button>
        </div>
        <script src="./js/main.js"></script>
    </body>
    </html>

## css样式表 ##

* { 
        padding: 0;
        margin: 0;
    }
    
    .header { 
        margin: 10px auto auto auto;
        text-align: center;
    }
    
    .header button { 
        padding: 5px 15px;
        background-color: #02a4ad;
        color: #fff;
        text-align: center;
        border: none;
        border-radius: 8px;
        outline: none;
        cursor: pointer;
    }
    
    .header button.active { 
        background-color: #00abff;
    }
    
    .footer { 
        margin: 100px auto auto auto;
        text-align: center;
    }
    
    
    
    table { 
        margin: 10px auto auto auto;
        border-spacing: 1px;
        background: #929196;
    }
    
    td { 
        padding: 0;
        width: 20px;
        height: 20px;
        border: 2px solid;
        background: #ccc;
        border-color: #fff #a1a1a1 #a1a1a1 #fff;
        text-align: center;
        line-height: 20px;
        font-weight: 700;
    }
    
    .mine { 
        background: #d9d9d9 url(../images/mine01.jpg) no-repeat center;
        background-size: cover;
    }
    
    .flag { 
        background: #fff url(../images/flag.jpeg) no-repeat center;
        background-size: cover;
    }
    
    .redMine { 
        background: #fff url(../images/mine02.jpg) no-repeat center;
        background-size: cover;
    }
    
    td.zero{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    }
    td.one{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    	color: #0332fe;
    }
    td.two{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    	color: #019f02;
    }
    td.three{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    	color: #ff2600;
    }
    td.four{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    	color: #93208f;
    }
    td.five{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    	color: #ff7f29;
    }
    td.six{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    	color: #ff3fff;
    }
    td.seven{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    	color: #3fffbf;
    }
    td.eight{ 
    	border-color: #d9d9d9;
    	background: #d9d9d9;
    	color: #22ee0f;
    }

## js源码 ##

[源码https://github.com/BaiH626/MineClearance/tree/master][https_github.com_BaiH626_MineClearance_tree_master]

[20210516015631368.png]: /images/20221020/d54834e2eebf47bb9ea6055326c93bba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70]: /images/20221020/c939ebb2ea0442a39429928578aae1a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221020/5d23e94020094e3e89b877944118e265.png
[https_github.com_BaiH626_MineClearance_tree_master]: https://github.com/BaiH626/MineClearance/tree/master