js实现扫雷游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js实现扫雷游戏代码
代码标签：游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{text-align: center;}
    tr{margin: 0 auto;padding: 0!important;margin: 0!important;}
    tr td{width: 20px;height: 20px;display: inline-block;box-shadow: 0px 0px 0px 0.3px #777;margin: 0;padding: 0;text-align: center;background: #c6d8dc;color: #777;font-size: 8px;line-height: 20px;}
    table{display: inline-block;margin: 0 auto;background: #c6d8dc;}
    .zero{background: #c6d8aa;}
    .one{color: deepskyblue;}
    .two{color: forestgreen;}
    .three{color: hotpink;}
    .four{color: #777;}
    .five{color: chocolate;}
    .six{color: crimson;}
    .seven{color: darkmagenta;}
    .eight{color: deeppink;}
    .mine{background:url(img/timg.png) no-repeat;background-size: 100%;}
    .onlyMine{background:url(img/timg1.png) no-repeat;background-size: 100%;}
    .flag{background: url(img/QQ20200312-212956@2x.png) 5px 2px no-repeat;background-size: 70%;}
    button{background: #c6d8aa;color: white;font-size: 10px;margin-bottom: 20px;margin-top: 10px;;}
    span{font-size: 10px;;}
    p{font-size: 10px;}
    a{text-decoration: none;color: white;background: red;padding: 2px 10px;font-size: 10px;}
    </style>
</head>

<body>
    <div>
        <button id='chuji'>初级</button>
        <button id='zhongji'>中级</button>
        <button id='gaoji'>高级</button>
        <span id='span'></span>
        <span>剩余雷的数量：</span><span id='num'></span>
        <a href="javascript:void(0)">重新开始游戏</a>

    </div>
    <div id='box'></div>


    <script>
        //创建一个棋盘的构造函数
        function Mine(tr, td, mineNum, count) {
            this.tr = tr;//棋盘行数
            this.td = td;//棋盘列数
            this.mineNum = mineNum;//雷的数量
            this.squares = [];//用于存储每个方块的信息
            this.tds = [];//存储每一个td的dom对象；
            this.setMine = mineNum;
            this.surplusMine = this.setMine;//存储剩余雷的数量；
            this.allRight = false;//雷是否被全部找出来
            this.parent = document.getElementById("box");//棋盘容器
            this.count = count;//存储玩家允许踩雷的次数；
            this.num = this.count;//计算玩家允许踩雷的次数；
        }
        //获取随机数，随机定义雷的位置
        Mine.prototype.randomNum = function () {
            //生成this.tr*this.td为长度的数组
            var square = new Array(this.tr * this.td);
            var len = square.length;
            for (var i = 0; i < len; i++) {
                square[i] = i
            }
            //随机打乱数组
            square.sort(function () {
                return .5 - Math.random()
            })
        
            return square.splice(0, this.setMine);
        
        
        }
        //在Mine原型上绑定创建棋盘的方格的方法
        Mine.prototype.createDom = function () {
            var This = this;
        
            var table = document.createElement('table');
            table.oncontextmenu = function () {
                return false
            }
            for (var i = 0; i < this.tr; i++) {
                var domTr = document.createElement('tr');
                this.tds[i] = []
                for (var j = 0; j < this.td; j++) {
                    var domTd = document.createElement('td');
                    domTd.pos = [i, j];
                    domTd.onmousedown = function () {
                        This.play(event, this)//This指的是实例对象，this指的是被点击的domtd，传入到paly方法中
                    }
                    //判断该domtd是否是雷
                    //  if(this.squares[i][j].type == 'mine'){
                    //      domTd.setAttribute('name','mine')
                    //   }else{
                    //     domTd.setAttribute('name','num')   
                    //   }
                    this.tds[i][j] = domTd;
        
                    domTr.appendChild(domTd)
                }
                table.appendChild(domTr)
            }
            this.parent.appendChild(table);
        }
        //找出雷周围的格子，格子的value+1
        Mine.prototype.getAround = function (square) {
            var x = square.x;
            var y = square.y;
            var result = [];
            for (var i = x - 1; i <= x + 1; i++) {
                for (var j = y - 1; j <= y + 1; j++) {
                    if (
                        //对格子超出边界的限制，不能等与自身，不能超出棋盘，不能type == ’mine‘
                        (i == 0 && j == 0) ||
                        i < 0 ||
                        j < 0 ||
                        i > this.td - 1 ||
                        j > this.tr - 1 ||
                        this.squares[j][i].type == 'mine'
                    ) {
                        continue
                    }
                    result.push([j, i])
                }
            }
            return result
        }
        //对雷周围的方格中的数字进行更新
        Mine.prototype.updataNum = function () {
            for (var i = 0; i < this.tr; i++) {
                for (var j = 0; j < this.td; j++) {
                    if (this.squares[i][j].type == 'number') {
                        continue;
                    }
                    var num = this.getAround(this.squares[i][j]);
                    for (var k = 0; k < num.length; k++) {
                        this.squares[num[k][0]][num[k][1]].value += 1
        
        
                    }
                }
            }
        
        }
        //玩家点击
        Mine.prototype.play = function (ev, obj) {
            var This = this,
                curSquare = this.squares[obj.pos[0]][obj.pos[1]],
        
                cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
            if (ev.which == 1) {//左键点击的事件
                if (curSquare.type == 'number') {
                    obj.className = cl[curSquare.value];
        
                    if (curSquare.value == 0) {//value = 0；如果该格子周围没有雷
                        function getAllZero(square) {//对该格子的四周搜索
                            var around = This.getAround(square);
                            for (var i = 0; i < around.length; i++) {
                                var x = around[i][0];
                                var y = around[i][1];
                                This.tds[x][y].className = cl[This.squares[x][y].value];
        
                                if (This.squares[x][y].value == 0) {//如果周围有value = 0的格子，则继续往此格子四周搜索（递归的出口，不为零时）
                                    This.tds[x][y].innerText = ''
                                    if (!This.squares[x][y].check) {
                                        This.squares[x][y].check = true;//为了避免重复搜索陷入死循环
                                        getAllZero(This.squares[x][y])//递归
        .........完整代码请登录后点击上方下载按钮下载查看