欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端小白的扫雷游戏

程序员文章站 2022-03-24 11:37:43
...

前端小白初长成:
看着大佬牛逼的视频,我也跟着敲了一下,感觉扫雷这个游戏,很适合像我们这种学前端的小白,对于封装函数思想,感觉函数封装很牛逼,比较复杂的是一步一步实现的过程,思路必须特别清晰你才能够把它完整的写完,不然bug是很多的.以上这里是html页面

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">
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>
<body>
    <div id="mine">
        <div class="level">
            <button class="active">初级</button>
            <button>中级</button>
            <button>高级</button>
            <button>重新开始</button>
        </div>
        <div class="gameBox">

            <!-- 表格用js动态生成 -->

        </div>

        <div class="info">
            剩余雷数:
            <span class="mineNum"></span>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>

</html>

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 .active {
    background-color: #00abff;
}

table {
    border-spacing: 1px;
    background: #939196;
    margin: 0 auto;

}

td {
    padding: 0;
    width: 20px;
    height: 20px;
    background: #ccc;
    border: 2px solid;
    border-color: #fff #a1a1a1 #a1a1a1 #fff;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
}

.info {
    margin-top: 10px;
    text-align: center;
}

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

.mine {
    width: 20px;
    height: 20px;
    background: #d9d9d9 url("../images/lei.png") no-repeat center;
    background-size: cover;
}

.flag {
    background: #ccc url("../images/qizi.png") no-repeat center;
    background-size: cover;
}

JavaScript部分: 

(function (w) {
    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;
        }

        // 把生成的数组随机排序
        square.sort(function () {
            return 0.5 - Math.random()
        });
        // console.log(square);
        // 截取随机生成的数组的前99个
        return square.slice(0, this.mineNum);
    }


    Mine.prototype.init = function () {
        // this.randomNum();
        // 雷在格子里的位置
        var rn = this.randomNum();
        var n = 0; //用来找到格子对应的索引

        for (var i = 0; i < this.tr; i++) {
            this.squares[i] = [];
            for (var j = 0; j < this.td; j++) {
                // this.squares[i][j] = [];
                // 取一个方块在数组里的数据要使用行于列的形式去取,找方块周围的方块的时候要用坐标的形式去取,行于列的形式跟坐标x,y的形式是玩完全相反的
                n++;
                if (rn.indexOf(n) != -1) {
                    // 条件成立,说明现在循环到的这个索引在雷的数组里找到了,那就表示这个索引对应的是个雷
                    this.squares[i][j] = {
                        type: 'mine',
                        x: j,
                        y: i
                    }
                } else {
                    this.squares[i][j] = {
                        type: 'number',
                        x: j,
                        y: i,
                        value: 0
                    }

                }
            }

        }

        // 给父级取消鼠标右键点击的显示菜单事件
        this.parent.oncontextmenu = function () {
            return false;
        }

        // console.log(this.squares);
        this.updateNum();
        this.createDom();

        // 剩余雷数
        this.mineNumDom = document.querySelector('.mineNum');
        this.mineNumDom.innerHTML = this.surplusMine;


    }

    // 找某个方格周围的8个格子  
    Mine.prototype.getAround = function (square) {

        var x = square.x;
        var y = square.y;
        var result = []; //把找到的格子的坐标返回出去

        // 通过一个坐标,找到周围8个盒子的坐标
        //      x-1,y-1        x,y-1    x+1,y-1
        //      x-1,y          x,y      x+1,y
        //      x-1,y+1        x,y+1    x+1,y+1

        // 双重循环遍历9个小9宫格(通过'坐标'去循环9宫格)
        for (var i = x - 1; i <= x + 1; i++) {
            for (var j = y - 1; j <= y + 1; j++) {
                // 排除4个角落,周围是类和自己不用循环到
                // 是个角落的判断 i<0  j<0 i>this.td-1 j>this.tr-1 
                // 自己 i=x && j=y
                // 旁边是个雷的情况也要排除  this.square[j][i].type =='mine'
                if (
                    i < 0 || //格子超出左边
                    j < 0 || //盒子超出上边
                    i > this.td - 1 || //格子超出右边
                    j > this.tr - 1 || //格子超出下边
                    (i == x && j == y) || //格子是自己
                    this.squares[j][i].type == 'mine' //格子是雷
                ) {
                    continue;
                }
                result.push([j, i]); //要以行与列的形式返回出去,因为到时候需要用它去取出数组里的数据
            }
        }

        return result;
    }

    // 更新所有的数字
    Mine.prototype.updateNum = function () {
        for (var i = 0; i < this.tr; i++) {
            for (var j = 0; j < this.td; j++) {
                // 只需要更新的是雷周围的数字,找雷周围的8个格子,如果是数字就累加
                if (this.squares[i][j].type == 'number') {
                    continue;
                }
                // 获取到每一个雷周围的数字
                var num = this.getAround(this.squares[i][j]);
                // console.log(num);

                for (var k = 0; k < num.length; k++) {
                    // num[k] = [0, 1];
                    // num[k][0] = 0;
                    // num[k][1] = 1;
                    this.squares[num[k][0]][num[k][1]].value += 1;
                }

            }
        }
        // console.log(this.squares);

    }

    // 创建表格
    Mine.prototype.createDom = function () {
        var that = this;
        var table = document.createElement('table');

        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 () {
                    that.play(event, this); //this->点击的那个domTd
                }

                // domTd.innerHTML = '0';
                this.tds[i][j] = domTd;

                // 显示随机的雷
                // if (this.squares[i][j].type == 'mine') {
                //     domTd.className = 'mine';
                // }
                // 显示随机的数字
                // if (this.squares[i][j].type == 'number') {
                //     domTd.innerHTML = this.squares[i][j].value;
                // }


                domTr.appendChild(domTd);
            }
            table.appendChild(domTr);
        }
        this.parent.innerHTML = ''; //避免多次点击创建多个
        this.parent.appendChild(table);
    }


    Mine.prototype.play = function (ev, obj) {

        if (ev.which == 1 && obj.className != 'flag') { //后面的条件是限制用户标完小红旗后不能在左点击
            // console.log(obj);

            // 点击的是左键
            var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
            // console.log(curSquare);
            var color = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];


            if (curSquare.type == 'number') {
                // 用户点到的是数字
                // console.log('数字');
                var This = this;
                obj.innerHTML = curSquare.value;
                obj.className = color[curSquare.value];

                // 判断点击的是0的情况
                if (curSquare.value == 0) {
                    // 1.当用户点击的是数字0,显示自己
                    // 2.找四周(2.1.如果四周的值不为0,那就显示到这里,不需要再找了) 
                    //        (2.2 如果四周有0,显示自己,又找四周又以这个0为中心点找0,直到找到的数字不为0为止)
                    // 循环递归找四周

                    obj.innerHTML = ''; //如果点击的是数字0就不显示

                    function getAllZero(square) {
                        var around = This.getAround(square); //找到了周围的n个格子

                        for (var i = 0; i < around.length; i++) {
                            var x = around[i][0]; //行
                            var y = around[i][1]; //列  

                            This.tds[x][y].className = color[This.squares[x][y].value];

                            if (This.squares[x][y].value == 0) {

                                //如果以某个格子为中心找到格子值为0,那就需要接着调用函数(递归)

                                if (!This.tds[x][y].check) {
                                    // 给对应的td添加一个属性,这条属性用于决定这个格子有没有被找过,如果有,他的值为true,下一次就不会再找了
                                    This.tds[x][y].check = true;
                                    getAllZero(This.squares[x][y]);
                                }
                            } else {
                                // 如果以某个格子为中心找到四周的格子的值不为0,那就把它显示出来

                                This.tds[x][y].innerHTML = This.squares[x][y].value;

                            }
                        }

                    }
                    getAllZero(curSquare);
                }

            } else {
                // 用户点的是是雷
                // console.log('雷');
                this.gameOver(obj);

            }

        }

        // 用户点击右键
        if (ev.which == 3) {
            // 如果右击的是数字,那就不能点击
            if (obj.className && obj.className != 'flag') {
                return;
            }
            obj.className = obj.className == 'flag' ? '' : 'flag';

            if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
                this.allRight = true; //用户标的小红旗都是雷
            } else {
                this.allRight = false;
            }

            if (obj.className == 'flag') {
                this.mineNumDom.innerHTML = --this.surplusMine;

            } else {

                this.mineNumDom.innerHTML = ++this.surplusMine;
            }

            if (this.surplusMine == 0) {
                //剩余雷的数量为0,证明用户已经标完小红旗,判断游戏是否游戏成功
                if (this.allRight) {
                    alert('恭喜你,游戏通过')
                } else {
                    alert('游戏失败');
                    this.gameOver();
                }

            }
        }

    }

    // 游戏失败函数
    Mine.prototype.gameOver = function (clickTd) {
        // 1. 显示所有的雷
        // 2. 取消所有格子的点击事件
        // 3. 给点中的那个雷显示红色

        for (var i = 0; i < this.tr; i++) {
            for (var j = 0; j < this.td; j++) {
                if (this.squares[i][j].type == 'mine') {
                    this.tds[i][j].className = 'mine';
                }
                // 取消格子的点击事件
                this.tds[i][j].onmousedown = null;
            }
        }
        if (clickTd) {
            clickTd.style.backgroundColor = 'red';
        }

    }


    // 上面button的功能

    var btns = document.querySelectorAll('.level button');
    var mine = null;
    var ln = 0;
    var arr = [
        [9, 9, 10],
        [16, 16, 40],
        [28, 28, 99]
    ];
    for (let i = 0; i < btns.length - 1; i++) {
        btns[i].onclick = function () {
            btns[ln].className = '';
            this.className = 'active';

            mine = new Mine(...arr[i]);
            mine.init();
            ln = i;
        }
    }

    btns[0].onclick(); //初始化
    btns[3].onclick = function () {
        mine.init();
    }

    // var mine = new Mine(28, 28, 99);

    mine.init();
    // console.log(mine.getAround(mine.squares[0][0]));




})(window)

 

相关标签: 小白学习扫雷