手写网页扫雷之js部分(vue)

var vm = new Vue({
    el:"#ui",
    data(){
        return{
            num:0,
            saoleiStyle:{
                width: "0px",
                height: "0px",
            },
            bombNum:0,
            bombs:[],
            startBtn:true,
            restartBtn:false
        }
    },
    methods:{

        mid(){
            this.num = 100;
            this.bombNum = 15;
            this.$data.saoleiStyle.width=this.$data.saoleiStyle.height="500px";
            for (let i = 0; i < this.bombNum; i++) {
                this.addBombs();
            }
        },

        dspl(){
            this.startBtn = !this.startBtn;
            this.restartBtn = !this.restartBtn;
        },

        //随机函数
        randomNum(){
            num = Math.floor(Math.random()*(this.num-1)+1);
            return num;
        },
        //添加地雷
        addBombs(){
            var num = this.randomNum();
            if (this.bombs.indexOf(num) == -1) {
                this.bombs.push(num);
            }else{
                this.addBombs();
            }
        },

        //打开菜单
        openMenu(box){
            var menuBox = document.getElementById(box);
            menuBox.style.display = 'block';
            for (let i = 0; i < this.num; i++) {
                if (box!=i+1) {
                    this.closeMenu(i+1);
                }
            }
            for (let i = 0; i < this.num; i++) {
                if (this.bombs.indexOf(i+1) == -1) {
                    this.bombLoop(i + 1);
                }
            }
        },
        //关
        closeMenu(box){
            var menuBox = document.getElementById(box);
            menuBox.style.display = 'none';
        },

        //标记
        mark(box){
            this.closeMenu(box,event);
            var flag = document.getElementById('flag'+box);
            if (flag.style.display == 'none') {
                flag.style.display = 'block';
                event.target.innerHTML="撤标";
            }else{
                flag.style.display = 'none';
                event.target.innerHTML="标记";
            }
        },

        //扫雷
        openBox(box){
            if (this.bombs.indexOf(box) != -1) {
                var bomb = document.getElementById('Bomb'+box);
                bomb.style.display="block";
                document.getElementById('box'+box).style.background="red";
                this.closeMenu(box);
                this.timer = setTimeout(() => {
                    alert('你莫得了');
                }, 500)
                this.timer = setTimeout(() => {
                    window.location.reload();
                }, 1000)
                return;
            }
            var bombBox = document.getElementById('box'+box);
            bombBox.className = "active box";
            this.closeMenu(box);

            this.check(box);

        },

        //检查周围
        check(box){
            var aroundBox = document.getElementById('around'+box);
            var bombBox = document.getElementById('box'+box);
            if (aroundBox.innerHTML == '0') {
                bombBox.className = "active box";
                aroundBox.innerHTML = '-1';
                aroundBox.style.display="none";
                //左边
                var box_left = box - 1;
                if (this.lastNum(box_left) >= 1) {
                    this.check(box_left);
                }
                //右边
                var box_right = box + 1;
                if (this.lastNum(box_right) != 1) {
                    this.check(box_right);
                }
                //上边
                var box_up = box - 10;
                if (box_up > 0) {
                    this.check(box_up);
                    //上左
                    var box_up_left = box_up - 1;
                    if (this.lastNum(box_up_left) >= 1) {
                        this.check(box_up_left);
                    }
                    //上右
                    var box_up_right = box_up + 1;
                    if (this.lastNum(box_up_right) != 1) {
                        this.check(box_up_right);
                    }
                }
                //下边
                var box_down = box + 10;
                if (box_down <= this.num) {
                    this.check(box_down);
                    //下左
                    var box_down_left = box_down - 1;
                    if (this.lastNum(box_down_left) >= 1) {
                        this.check(box_down_left);
                    }
                    //下右
                    var box_down_right = box_down + 1;
                    if (this.lastNum(box_down_right) != 1) {
                        this.check(box_down_right);
                    }
                }
            } else if (aroundBox.innerHTML != '-1') {
                aroundBox.style.display = "block";
                aroundBox.className = "box surround";
            }
        },

        bombLoop(box){
            var around = 0;
            //左边
            var left = box-1;
            if (this.lastNum(left) > 0) {
                if (this.bombs.indexOf(left) != -1) {
                    around += 1;
                }
            }
            //右边
            var right = box + 1;
            if (this.lastNum(right) != 1) {
                if (this.bombs.indexOf(right) != -1) {
                    around += 1;
                }
            }
            //上边
            var up = box - 10;
            if (up > 0) {
                if (this.bombs.indexOf(up) != -1) {
                    around += 1;
                }
                //上左
                var up_Left = up - 1;
                if (this.lastNum(up_Left) > 0) {
                    if (this.bombs.indexOf(up_Left) != -1) {
                        around += 1;
                    }
                }
                //上右
                var up_Right = up + 1;
                if (this.lastNum(up_Right) != 1) {
                    if (this.bombs.indexOf(up_Right) != -1) {
                        around += 1;
                    }
                }
            }
            //下边
            var down = box + 10;
            if (down <= this.num) {
                if (this.bombs.indexOf(down) != -1) {
                    around += 1;
                }
                //下左
                var down_Left = down - 1;
                if (this.lastNum(down_Left) > 0) {
                    if (this.bombs.indexOf(down_Left) != -1) {
                        around += 1;
                    }
                }
                //下右
                var down_Right = down + 1;
                if (this.lastNum(down_Right) != 1) {
                    if (this.bombs.indexOf(down_Right) != -1) {
                        around += 1;
                    }
                }
            }
            document.getElementById('around'+box).innerHTML = around;
        },
        // 判断位置
        lastNum(box){
            var boxStr = box.toString().split('');
            var last = boxStr[boxStr.length-1];
            return parseInt(last);
        }, 

        //刷新按钮
        restart(){
            window.location.reload();
        }
    },

})