JS扫雷小游戏(DOM (html+css+js))

神小夜

已于 2023-02-26 14:11:37 修改

阅读量2.5k

点赞数 5

分类专栏： Web小游戏文章标签： js 扫雷小游戏

于 2019-11-11 16:09:08 首次发布

本文链接：https://blog.csdn.net/weixin_40693643/article/details/103009459

版权

一：效果图：

在这里插入图片描述

二：资源

js扫雷小游戏源代码下载地址

js贪吃蛇小游戏链接
 python小黄脸大战小游戏链接
 vue高仿网易云音乐app

三：源代码：

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="main">
        <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></div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

css部分：

#main{
    margin:  100px auto;
}
.level{
    text-align: center;
    margin-bottom: 10px
}
.level button{
    padding: 5px 15px;
    background: #1565C0;
    border: none;
    color: #fff;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.level button.active{
    background: #00abff;

}
table{
    border-spacing: 1px;
    background-image: linear-gradient(to bottom right, #B3E5FC, #3644BE);
    margin: 0 auto;
}
td{
    padding: 0;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0);
    border: 2px solid;
    border-color: #95CCF6 #3644BE #3644BE #95CCF6;
    text-align: center;
    line-height: 20px;
}
td.zero{
    border-color: #E1F5FE;
    background: #E1F5FE;
}
td.one{
    border-color: #E1F5FE;
    background: #E1F5FE;
    color: #0332fe;
}
td.two{
    border-color: #E1F5FE;
    background: #E1F5FE;
    color: #019f02;
}
td.three{
    border-color: #E1F5FE;
    background: #E1F5FE;
    color: #ff2600;
}
td.four{
    border-color: #E1F5FE;
    background: #E1F5FE;
    color: #93208f;
}
td.five{
    border-color: #E1F5FE;
    background: #E1F5FE;
    color: #ff7f29;
}
td.six{
    border-color: #E1F5FE;
    background: #E1F5FE;
    color: #ff3fff;
}
td.seven{
    border-color: #E1F5FE;
    background: #E1F5FE;
    color: #3fffbf;
}
td.eight{
    border-color: #E1F5FE;
    background: #E1F5FE;
    color: #22ee0f;
}
.info{
    text-align: center;
    margin-top: 10px;
}
.mine {
    background: #E1F5FE url(../img/bg3.png) no-repeat center;
    background-size:cover;
}
.flag{
    background: #E3F2FD url(../img/bg2.png) no-repeat center;
    background-size:cover;
}

js部分：

function Mine(tr,td,mineNum){
   
    this.tr = tr; // 行数
    this.td = td; // 列数
    this.mineNum = mineNum; // 雷数
    
    this.squares = [];  // 存储所有方块的信息，它是一个二维数组，按行与列的顺序排放，存取都使用行列的形式
    this.tds = [];  // 存储所有单元格的DOM
    this.surplusMine = mineNum // 剩余雷的数量
    this.allRight = false; // 右击标的小红旗是否全是雷

    this.parent = document.querySelector('.gameBox');
}

// 生成n个不重复的数字
Mine.prototype.randomNum = function () {
   
    var square = new Array(this.tr*this.td);
    for(var i =0; i<square.length; i++) {
   
        square[i]=i;
    }
    // console.log(square);
    square.sort(function(){
   return 0.5-Math.random()});  //