原生JS实现扫雷——项目总结

￡神魔★判官ぃ 2022-12-09 05:16 119阅读 0赞

## 项目展示图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center]

## 项目准备 ##

一样的，我们先是准备出三个文件夹，以及根目录下的index.html 文件

![在这里插入图片描述][20200922095145925.png_pic_center]

然后是两张图片（地雷 和 旗子）

![在这里插入图片描述][20200922141713142.png_pic_center]  
![在这里插入图片描述][2020092214171335.png_pic_center]

之后是html结构

## html ##

首先是最外层的 游戏内容区域的div 取名id为mine

之后是游戏内容区域中最上面的四个按钮，我们用四个button标签来表示，并且用一个div来包裹起来

并且给初级按钮一个最初的选中的样式

之后是 game 的游戏进行区域，也就是雷区

最后一个是提示区域

<div class="info">
        剩余雷数：<span class="mineNum"></span>
        <br>
        <span class="tips">左键扫雷，右键插旗，再次点击右键拔旗</span>
    </div>

那么最后，我们整合一下 最后的代码如下

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS扫雷</title>
        <link rel="stylesheet" href="CSS/index.css">
        <link rel="icon" href="favicon.ico">
    </head>
    
    <body>
        <div id="mine">
            <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>
                <br>
                <span class="tips">左键扫雷，右键插旗，再次点击右键拔旗</span>
            </div>
        </div>
        <script src="JS/index.js"></script>
    </body>
    
    </html>

## CSS ##

首先呢我们给mine最外层的区域，让主内容居中

#mine {
        
        margin: 50px auto;
    }

之后，给level 的 div 和 里面的 button 添加样式

并且，添加默认的active样式

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

之后，我们先重定义了下 table标签 和 td 标签，我们的扫雷主要的游戏区域就是通过table标签来实现

table {
        
        border-spacing: 1px;
        background-color: #929196;
        margin: 0 auto;
    }
    
    td {
        
        padding: 0;
        width: 20px;
        height: 20px;
        background-color: #ccc;
        border: 2px solid;
        border-color: #fff #a1a1a1 #a1a1a1 #fff;
        text-align: center;
        line-height: 20px;
        font-weight: bold;
    
    }

之后是提示区域的样式

.info {
        
        margin-top: 10px;
        text-align: center;
    }
    
    .tips {
        
        color: red;
        font-size: 16px;
    }

最后，我们预定义一些样式

比如，我们的地雷的样式,以及我们的棋子的样式

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

最后还有一个就是游戏内，一些方块会现实数字，这些数字代表了改方块周围的雷的数量

td.zero {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
    }
    
    td.one {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #0332fe;
    }
    
    td.two {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #019f02;
    }
    
    td.three {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff2600;
    }
    
    td.four {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #93208f;
    }
    
    td.five {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff7f29;
    }
    
    td.six {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff3fff;
    }
    
    td.seven {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #3fffbf;
    }
    
    td.eight {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #22ee0f;
    }

所以综上所述，整合了下css代码，我们的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 button.active {
        
        background-color: #00abff;
    }
    
    table {
        
        border-spacing: 1px;
        background-color: #929196;
        margin: 0 auto;
    }
    
    td {
        
        padding: 0;
        width: 20px;
        height: 20px;
        background-color: #ccc;
        border: 2px solid;
        border-color: #fff #a1a1a1 #a1a1a1 #fff;
        text-align: center;
        line-height: 20px;
        font-weight: bold;
    
    }
    
    .tips {
        
        color: red;
        font-size: 16px;
    }
    
    .mine {
        
        background: #d9d9d9 url(../images/mine.png) no-repeat center;
        background-size: cover;
    }
    
    .flag {
        
        background: #ccc url(../images/flag.png) no-repeat center;
        background-size: cover;
    }
    
    .info {
        
        margin-top: 10px;
        text-align: center;
    }
    
    
    td.zero {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
    }
    
    td.one {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #0332fe;
    }
    
    td.two {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #019f02;
    }
    
    td.three {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff2600;
    }
    
    td.four {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #93208f;
    }
    
    td.five {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff7f29;
    }
    
    td.six {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #ff3fff;
    }
    
    td.seven {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #3fffbf;
    }
    
    td.eight {
        
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        color: #22ee0f;
    }

## JavaScript ##

### 思路 ###

这次我们打算在原型链上编程

首先，我们先写出mine 的构造函数

### Mine 构造函数 ###

### 生成随机的雷的排布 ###

我们构造函数中传进去了三个参数，行数，列数，以及需要的雷数，我们的思路是这样的，我们游戏是在table里面进行，table一共有 tr \* td 个格子，那么我们可以创建一个 长度为 tr \* td 的 数组，然后，给数组赋值，每个值对应一个方格，最后再给数组乱序，取出前 mineNum（需要的雷数） 个， 这mineNum个方格所对应的就是我们的地雷的方格

那么我们写出 我们的js代码

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()
        });
        return square.slice(0, this.mineNum);
    };

### 创建表格 ###

我们虽然上述把雷的位置取出了，但是，我们再创建游戏区域的时候，并没必要，在创建的时候就将逻辑写入，我们可以在点击小方格的时候，来判断其位置是否是雷还是空即可

因此，我们先写出创建表格的 js 代码

Mine.prototype.createDom = function () {
        
        var This = 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');
                this.tds[i][j] = domTd;                     // 把所有创建的td添加到数组当中
                domTd.pos = [i, j];                         // 把格子对应的行和列村到格子身上，为了下面通过这个值去数组里面取到对应的数据
                domTd.onmousedown = function () {
        
                    This.play(event, this);                 // 大的This 指的是实例对象   小的this指的是点击的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);
    };

其中的 This.play 是我们点击方块之后的判断，判断是 雷 还是 空

> 再写play函数之前，我们还有一些其他的逻辑需要编写

### 初始化函数 ###

Mine.prototype.init = function () {
        
        // this.randomNum();
        var rn = this.randomNum();                  // 雷在格子里的位置
        var n = -1;                                 // 用来找到对应的索引格子
        for (var i = 0; i < this.tr; i++) {
        
            this.squares[i] = [];
            for (var j = 0; j < this.td; 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.updateNum();
        this.createDom();
    
        this.parent.oncontextmenu = function () {
        
            return false;
            // 阻止右键出菜单事件
        }
    
        // 剩余雷数
        this.mineNumDom = document.querySelector('.mineNum');
        this.mineNumDom.innerHTML = this.surplusMine;
    };

### getAround() 函数 ###

// 找某个方格周围的八个格子
    Mine.prototype.getAround = function (square) {
        
        var x = square.x,
            y = square.y;
        var result = []; // 把找到的格子的坐标返回出去（二维数组）
        for (var i = x - 1; i <= x + 1; i++) {
        
            for (var j = y - 1; j <= y + 1; j++) {
        
                if (i < 0 ||
                    j < 0 ||
                    i > this.td - 1 ||
                    j > this.tr - 1 ||
                    // 上述表示出边界
                    (i == x && j == y) ||
                    // 表示循环到自己
                    this.squares[j][i].type == 'mine'
                    // 表示循环到（周围的格子）雷 (注意i和j表示的是坐标，而squares存储的是行和列)
                ) {
        
                    continue;
                }
                // 要以行与列的形式返回出去，因为到时候需要它去取数组里的数据
                result.push([j, i]);
            }
        }
        return result;
    }

### updateNum() 函数 ###

// 更新所有的数字
    Mine.prototype.updateNum = 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;
                }
            }
        }
    };

### play函数 ###

Mine.prototype.play = function (ev, obj) {
        
        var This = this;
        if (ev.which == 1 && obj.className != 'flag') {
         // 后面的条件是为了用户右键之后不能点击
            // 点击的是左键
            var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
            var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
            // cl 存储className
    
            if (curSquare.type == 'number') {
        
                // 用户点击的是数字
                obj.innerHTML = curSquare.value;
                obj.className = cl[curSquare.value];
    
                // 点到了数字零
                if (curSquare.value == 0) {
        
                    /* 
                        递归思路： 
                        1.显示自己
                        2.查找四周
                            1) 显示四周（如果四周的值不为零，那就显示到这，不需要再找了）
                            2）如果值为零了
                                a.显示自己
                                b.找四周（如果四周的值不为零，那就显示到这，不需要再找了）
                                    I.显示自己
                                    II.找四周（如果四周的值不为零，那就显示到这，不需要再找了）
                                        。。。。。。
                     */
    
                    obj.innerHTML = '';                             // 显示为空
                    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 = cl[This.squares[x][y].value];
    
                            if (This.squares[x][y].value == 0) {
        
                                // 如果以某个格子为中心，找到的某个格子为零，那就接着调用（递归）
                                if (!This.tds[x][y].check) {
        
                                    // 给对应的td 添加一条属性，如果找过的话，这个值就为true，下一次就不会再找了，防止函数调用栈出问题
                                    This.tds[x][y].check = true;
                                    getAllZero(This.squares[x][y]);
                                }
    
                            } else {
        
                                // 如果以某个格子为中心找到的四周的值不为零，就把数字显示出来
                                This.tds[x][y].innerHTML = This.squares[x][y].value;
                            }
                        }
    
                    }
                    getAllZero(curSquare);
                }
    
            } else {
        
                // 用户点击的是雷
                this.gameOver(obj);
            }
        }
        if (ev.which == 3) {
        
            // 用户点击的是右键
            // 如果右击的是一个数字，就不能点击
            if (obj.className && obj.className != 'flag') {
        
                return;
            }
            obj.className = obj.className == 'flag' ? '' : 'flag'; // 切换calss 有无
    
            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 == true) {
        
                    // 这个条件成立，说明用户全部标对了
                    alert('恭喜你，游戏通过');
                    for (i = 0; i < this.tr; i++) {
        
                        for (j = 0; j < this.td; j++) {
        
                            this.tds[i][j].onmousedown = null;
                        }
                    }
    
                } else {
        
                    alert('游戏失败');
                    this.gameOver();
                }
            }
        }
    }

### gameOver函数 ###

Mine.prototype.gameOver = function (clickTd) {
        
        /* 
            1.显示所有的雷
            2.取消所有格子的点击事件
            3.给点中的格子标红
        */
        for (i = 0; i < this.tr; i++) {
        
            for (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 = '#f00';
        }
    }

> 最后，补充些其他的功能

### 其他 ###

// 添加 button 的功能
    var btns = document.getElementsByTagName('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][0], arr[i][1], arr[i][2]);
            mine.init();
            ln = i;
        }
    }
    btns[0].onclick(); // 初始化
    btns[3].onclick = function () {
        
        for (var i = 0; i < btns.length - 1; i++) {
        
            if (btns[i].className == 'active') {
        
                btns[i].onclick();
            }
        }
    }

### js 整合代码 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/00f7fda1332947f7a5ba1d69eb280556.png
[20200922095145925.png_pic_center]: /images/20221123/a19ff0479eef40ac8169151eb03ae539.png
[20200922141713142.png_pic_center]: /images/20221123/51527cc710204bc598e91a54a8232979.png
[2020092214171335.png_pic_center]: /images/20221123/0faa430378814f45821945fa4d7bdf3c.png