Javascript 实现扫雷小游戏（含详细注释）

ゝ一世哀愁。 2022-11-27 08:50 222阅读 0赞

## 样例展示![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center] ##

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

## 文件夹结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center 2]

## index.html ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS扫雷</title>
        <link rel="stylesheet" href="CSS/index.css">
        <link rel="icon" href="favicon.ico">
    </head>
    
    <body>
        <div id="mine">
            <div class="level">
                <button class="active">初级</button>
                <button>中级</button>
                <button>高级</button>
                <button>重新开始</button>
            </div>
            <div class="gameBox">
            </div>
            <div class="info">
                剩余雷数：<span class="mineNum"></span>
                <br>
                <span class="tips">左键扫雷，右键插旗，再次点击右键拔旗</span>
            </div>
        </div>
        <script src="JS/index.js"></script>
    </body>
    
    </html>

## index.css ##

#mine {
        
        margin: 50px auto;
    
    }
    
    .level {
        
        text-align: center;
        margin-bottom: 10px;
    }
    
    .level button {
        
        padding: 5px 15px;
        background-color: #02a4ad;
        border: none;
        color: #fff;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
    }
    
    .level button.active {
        
        background-color: #00abff;
    }
    
    table {
        
        border-spacing: 1px;
        background-color: #929196;
        margin: 0 auto;
    }
    
    td {
        
        padding: 0;
        width: 20px;
        height: 20px;
        background-color: #ccc;
        border: 2px solid;
        border-color: #fff #a1a1a1 #a1a1a1 #fff;
        text-align: center;
        line-height: 20px;
        font-weight: bold;
    
    }
    
    .tips {
        
        color: red;
        font-size: 16px;
    }
    
    .mine {
        
        background: #d9d9d9 url(../images/mine.png) no-repeat center;
        background-size: cover;
    }
    
    .flag {
        
        background: #ccc url(../images/flag.png) no-repeat center;
        background-size: cover;
    }
    
    .info {
        
        margin-top: 10px;
        text-align: center;
    }
    
    
    td.zero {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
    }
    
    td.one {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #0332fe;
    }
    
    td.two {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #019f02;
    }
    
    td.three {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff2600;
    }
    
    td.four {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #93208f;
    }
    
    td.five {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff7f29;
    }
    
    td.six {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff3fff;
    }
    
    td.seven {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #3fffbf;
    }
    
    td.eight {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #22ee0f;
    }

## index.js(核心代码） ##

内含详细注释

## 图片 ##

![在这里插入图片描述][20200814161302986.png_pic_center]  
![在这里插入图片描述][20200814161302974.png_pic_center]  
其中的 favicon.ico 是用地雷进行格式转换得到的，大家可自行解决

## end ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/0c41d157faa24798a8ae2ce58fa4faf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/1814160e7ba54f11b0ca6ab1fdb6a004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/5f5f4ee37bd34152af0662ec600b49e4.png
[20200814161302986.png_pic_center]: /images/20221124/fcf9823d127444b3b1b9ef08a1b9a413.png
[20200814161302974.png_pic_center]: /images/20221124/546439a731854aa6b2e0f78baabd717f.png