原生js制作扫雷-自定义难度

阳光穿透心脏的1/2处 2023-01-09 15:31 101阅读 0赞

## 游戏功能： ##

### 1、有四个难度 ###

### 2、可以自定难度 ###

## 1、html相关代码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>扫雷</title>
        <script src="js/mine.js"></script>
        <link rel="stylesheet" href="./css/mine.css">
    </head>
    
    
    <body>
        <div class="level">
            <button type="button" name="button" class="choice-level">自定义</button>
            <button type="button" name="button" class="choice-level">初级</button>
            <button type="button" name="button" class="choice-level">中级</button>
            <button type="button" name="button" class="choice-level">高级</button>
            <button type="button" name="button" class="choice-level">魔鬼级</button>
            <button type="button" name="button" class="restart">重新开始</button>
        </div>
        <div class="gameBox"></div>
        <div class="info">
            <p>剩余雷数：
                <span class="residue"></span>
            </p>
            <p>
                TIME：
                <span class="tick"></span>S
            </p>
    
        </div>
    </body>
    
    
    </html>

## 2、css样式 ##

*{
        margin: 0;
        padding: 0;
    }
    .gameBox{
        margin-top: 30px;
    }
    body{
        font-size: 0;
    }
    ul{
        list-style: none;
        text-align: center;
        overflow: hidden;
    }
    .col{
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        background-color: rgba(32, 226, 255, 0.4);
        border: 1px solid rgb(129, 129, 129);
        font-size: 16px;
        margin: 1.5px;
        vertical-align: top;
        position: relative;
    }
    .col:hover{
        background-color: #0af;
    }
    .col span{
        cursor: default;
    }
    .hide{
        display: none;
    }
    .boom{
        background: url("../img/boom.svg") no-repeat 2.5px 2px;
        background-size: 18px 18px;
    }
    .num-1{
        color: rgb(8, 153, 235);
    }
    .num-2{
        color: rgb(255, 45, 178);
    }
    .num-3{
        color:#16a085;
    }
    .num-4{
        color: #8e44ad;
    }
    .num-5{
        color: rgb(255, 167, 45);
    }
    .num-6{
        color:  rgb(8, 126, 176);
    }
    .num-7{
        color: #e67e22;
    }
    .num-8{
        color: #c0392b;
    }
    .img-flag{
        width: 18px;
        height: 18px;
        position: absolute;
        top: 3px;
        left: 3px;
    }
    .level{
        margin-top: 30px;
        font-size: 20px;
        text-align: center;
    }
    .level button{
        padding: 5px 8px;
        background-color: rgb(67, 183, 189);
        border: none;
        outline: none;
        border-radius: 3px;
        cursor: pointer;
        color: #fff;
    }
    .level button:hover{
        background-color: rgb(23, 132, 138);
    }
    .info{
        margin-top: 30px;
        font-size: 16px;
        text-align: center;
    }
    .info p{
        display: inline-block;
        width: 130px;
        margin: 0 auto;
    }
    .info p span{
        color: rgb(67, 183, 189);
    }

## 3、js代码 ##