js实现经典扫雷游戏

    
    
    
    
    



    
剩余雷数：
    


    
    

        初级
        中级
        高级
        重新开始
    
    

* {
    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;
}

function Mine(tr, td, mineNum) {
    this.tr = tr;   // 行
    this.td = td;   // 列
    this.mineNum = mineNum; // 雷的数量
    this.squares = []; // 方格的对象数组
    this.tds = []; // 方格的DOM
    this.surplusMine = mineNum; // 剩余的雷数
    this.mainBox = document.querySelector('.gameBox'); // 获取游戏box元素
    //this.createDom();
}

/*生成随机数*/
Mine.prototype.randomNum = function () {
    var positiOnArray= new Array(this.tr * this.td);
    for (var i = 0; i  this.td - 1 ||  // 超出表格右边
                j > this.tr - 1 ||  // 超出表格下边
                (i == x && j == y ||    // 点击点本身
                    this.squares[j][i].type == 'mine')  // 如果是雷也没必要修改数值
            ) {
                continue;
            }
            result.push([j, i]);    // 将周围格子信息添加到result数组 如第j行，第i列有数字
        }
    }

    return result;  // 返回格子信息数组
}


// 更新数字
Mine.prototype.updateNum = function () {
    for (var i = 0; i