JS實現(xiàn)掃雷項目總結(jié)

更新時間：2021年05月19日 16:11:45 作者：是榆榆啊

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)掃雷項目總結(jié)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)掃雷項目的總結(jié)，供大家參考，具體內(nèi)容如下

項目展示圖

項目準(zhǔn)備

一樣的，我們先是準(zhǔn)備出三個文件夾，以及根目錄下的index.html 文件

然后是兩張圖片（地雷和旗子）

之后是html結(jié)構(gòu)

html

首先是最外層的游戲內(nèi)容區(qū)域的div 取名id為mine

<div id="mine">
</div>

之后是游戲內(nèi)容區(qū)域中最上面的四個按鈕，我們用四個button標(biāo)簽來表示，并且用一個div來包裹起來

并且給初級按鈕一個最初的選中的樣式

<div class="level">
    <button class="active">初級</button>
    <button>中級</button>
    <button>高級</button>
    <button>重新開始</button>
</div>

之后是 game 的游戲進(jìn)行區(qū)域，也就是雷區(qū)

<div class="gameBox">
</div>

最后一個是提示區(qū)域

<div class="info">
    剩余雷數(shù)：<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">
            剩余雷數(shù)：<span class="mineNum"></span>
            <br>
            <span class="tips">左鍵掃雷，右鍵插旗，再次點擊右鍵拔旗</span>
        </div>
    </div>
    <script src="JS/index.js"></script>
</body>

</html>

CSS

首先呢我們給mine最外層的區(qū)域，讓主內(nèi)容居中

#mine {
    margin: 50px auto;
}

之后，給level 的 div 和里面的 button 添加樣式

并且，添加默認(rèn)的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標(biāo)簽和 td 標(biāo)簽，我們的掃雷主要的游戲區(qū)域就是通過table標(biāo)簽來實現(xiàn)

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;

}

之后是提示區(qū)域的樣式

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

.tips {
    color: red;
    font-size: 16px;
}

最后，我們預(yù)定義一些樣式

比如，我們的地雷的樣式,以及我們的棋子的樣式

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

最后還有一個就是游戲內(nèi)，一些方塊會現(xiàn)實數(shù)字，這些數(shù)字代表了改方塊周圍的雷的數(shù)量

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 的構(gòu)造函數(shù)

Mine 構(gòu)造函數(shù)

function Mine(tr, td, mineNum) {
    this.tr = tr;                                       // tr表示行數(shù)  
    this.td = td;                                       // td表示列數(shù)  
    this.mineNum = mineNum;     // mineNum表示雷的數(shù)量

    this.squares = [];        // 存儲所有方塊的信息，是一個二維數(shù)組，按照行與列的順序排放，存取都按照行列方式
    this.tds = [];            // 存儲所有單元格的DOM
    this.surplusMine = mineNum;          // 剩余雷的數(shù)量
    this.allRight = false;       // 右擊標(biāo)注的小紅旗是否全部是雷，用來判斷用戶是否游戲成功
    this.parent = document.querySelector('.gameBox');
}

生成隨機(jī)的雷的排布

我們構(gòu)造函數(shù)中傳進(jìn)去了三個參數(shù)，行數(shù)，列數(shù)，以及需要的雷數(shù)，我們的思路是這樣的，我們游戲是在table里面進(jìn)行，table一共有 tr * td 個格子，那么我們可以創(chuàng)建一個長度為 tr * td 的數(shù)組，然后，給數(shù)組賦值，每個值對應(yīng)一個方格，最后再給數(shù)組亂序，取出前 mineNum（需要的雷數(shù)）個，這mineNum個方格所對應(yīng)的就是我們的地雷的方格

那么我們寫出我們的js代碼

Mine.prototype.randomNum = function () {
    var square = new Array(this.tr * this.td); // 生成一個空數(shù)組  長度為格子總數(shù)
    for (var i = 0; i < square.length; i++) {
        square[i] = i;
    }
    // 數(shù)組亂序
    square.sort(function () {
        return 0.5 - Math.random()
    });
    return square.slice(0, this.mineNum);
};

創(chuàng)建表格

我們雖然上述把雷的位置取出了，但是，我們再創(chuàng)建游戲區(qū)域的時候，并沒必要，在創(chuàng)建的時候就將邏輯寫入，我們可以在點擊小方格的時候，來判斷其位置是否是雷還是空即可

因此，我們先寫出創(chuàng)建表格的 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;                     // 把所有創(chuàng)建的td添加到數(shù)組當(dāng)中
            domTd.pos = [i, j];                         // 把格子對應(yīng)的行和列村到格子身上，為了下面通過這個值去數(shù)組里面取到對應(yīng)的數(shù)據(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 = '';       // 避免多次點擊創(chuàng)建多個

    this.parent.appendChild(table);
};

其中的 This.play 是我們點擊方塊之后的判斷，判斷是雷還是空

再寫play函數(shù)之前，我們還有一些其他的邏輯需要編寫

初始化函數(shù)

Mine.prototype.init = function () {
    // this.randomNum();
    var rn = this.randomNum();                  // 雷在格子里的位置
    var n = -1;                                 // 用來找到對應(yīng)的索引格子
    for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        for (var j = 0; j < this.td; j++) {
            // 取一個方塊在數(shù)組里的數(shù)據(jù)，要使用行與列的形式存取
            // 找方塊周圍的方塊的時候，要用坐標(biāo)的形式去取
            // 行與列的形式，和坐標(biāo)的形式，x，y是剛好相反的
            n++;
            if (rn.indexOf(n) != -1) {
                // 如果這個條件成立，說明現(xiàn)在循環(huán)到的索引在雷的數(shù)組里面找到了，那就表明這個索引對應(yīng)的是個雷
                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;
        // 阻止右鍵出菜單事件
    }

    // 剩余雷數(shù)
    this.mineNumDom = document.querySelector('.mineNum');
    this.mineNumDom.innerHTML = this.surplusMine;
};

getAround() 函數(shù)

// 找某個方格周圍的八個格子
Mine.prototype.getAround = function (square) {
    var x = square.x,
        y = square.y;
    var result = []; // 把找到的格子的坐標(biāo)返回出去（二維數(shù)組）
    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) ||
                // 表示循環(huán)到自己
                this.squares[j][i].type == 'mine'
                // 表示循環(huán)到（周圍的格子）雷 (注意i和j表示的是坐標(biāo)，而squares存儲的是行和列)
            ) {
                continue;
            }
            // 要以行與列的形式返回出去，因為到時候需要它去取數(shù)組里的數(shù)據(jù)
            result.push([j, i]);
        }
    }
    return result;
}

updateNum() 函數(shù)

// 更新所有的數(shù)字
Mine.prototype.updateNum = function () {
    for (var i = 0; i < this.tr; i++) {
        for (var j = 0; j < this.td; j++) {
            // 要更新的是雷周圍的數(shù)字
            if (this.squares[i][j].type == 'number') {
                continue;
            }
            var num = this.getAround(this.squares[i][j]); // 獲取到每一個雷周圍的數(shù)字
            for (var k = 0; k < num.length; k++) {
                this.squares[num[k][0]][num[k][1]].value += 1;
            }
        }
    }
};

play函數(shù)

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') {
            // 用戶點擊的是數(shù)字
            obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];

            // 點到了數(shù)字零
            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) {
                            // 如果以某個格子為中心，找到的某個格子為零，那就接著調(diào)用（遞歸）
                            if (!This.tds[x][y].check) {
                                // 給對應(yīng)的td 添加一條屬性，如果找過的話，這個值就為true，下一次就不會再找了，防止函數(shù)調(diào)用棧出問題
                                This.tds[x][y].check = true;
                                getAllZero(This.squares[x][y]);
                            }

                        } else {
                            // 如果以某個格子為中心找到的四周的值不為零，就把數(shù)字顯示出來
                            This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }

                }
                getAllZero(curSquare);
            }

        } else {
            // 用戶點擊的是雷
            this.gameOver(obj);
        }
    }
    if (ev.which == 3) {
        // 用戶點擊的是右鍵
        // 如果右擊的是一個數(shù)字，就不能點擊
        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) {
            // 剩余的雷的數(shù)量為0，表示用戶已經(jīng)標(biāo)完小紅旗了，這時候要判斷游戲是成功還是結(jié)束
            if (this.allRight == true) {
                // 這個條件成立，說明用戶全部標(biāo)對了
                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函數(shù)

Mine.prototype.gameOver = function (clickTd) {
    /* 
        1.顯示所有的雷
        2.取消所有格子的點擊事件
        3.給點中的格子標(biāo)紅
    */
    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';
    }
}

最后，補(bǔ)充些其他的功能

其他

// 添加 button 的功能
var btns = document.getElementsByTagName('button');
var mine = null; // 用來存儲生成的實例
var ln = 0; // 用來處理當(dāng)前選中的狀態(tài)
var arr = [
    [9, 9, 10],
    [16, 16, 40],
    [28, 28, 99]
]; //不同級別的行數(shù)，列數(shù)，雷數(shù)
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 整合代碼

function Mine(tr, td, mineNum) {
    this.tr = tr;                                       // tr表示行數(shù)  
    this.td = td;                                       // td表示列數(shù)  
    this.mineNum = mineNum;                             // mineNum表示雷的數(shù)量

    this.squares = [];                                  // 存儲所有方塊的信息，是一個二維數(shù)組，按照行與列的順序排放，存取都按照行列方式
    this.tds = [];                                      // 存儲所有單元格的DOM
    this.surplusMine = mineNum;                         // 剩余雷的數(shù)量
    this.allRight = false;                              // 右擊標(biāo)注的小紅旗是否全部是雷，用來判斷用戶是否游戲成功
    this.parent = document.querySelector('.gameBox');
}

// 生成n個不重復(fù)的數(shù)字
Mine.prototype.randomNum = function () {
    var square = new Array(this.tr * this.td); // 生成一個空數(shù)組  長度為格子總數(shù)
    for (var i = 0; i < square.length; i++) {
        square[i] = i;
    }
    // 數(shù)組亂序
    square.sort(function () {
        return 0.5 - Math.random()
    });
    return square.slice(0, this.mineNum);
};

// 創(chuàng)建表格
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;                     // 把所有創(chuàng)建的td添加到數(shù)組當(dāng)中
            domTd.pos = [i, j];                         // 把格子對應(yīng)的行和列村到格子身上，為了下面通過這個值去數(shù)組里面取到對應(yīng)的數(shù)據(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 = '';                         // 避免多次點擊創(chuàng)建多個

    this.parent.appendChild(table);
};

Mine.prototype.init = function () {
    // this.randomNum();
    var rn = this.randomNum();                  // 雷在格子里的位置
    var n = -1;                                 // 用來找到對應(yīng)的索引格子
    for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        for (var j = 0; j < this.td; j++) {
            // 取一個方塊在數(shù)組里的數(shù)據(jù)，要使用行與列的形式存取
            // 找方塊周圍的方塊的時候，要用坐標(biāo)的形式去取
            // 行與列的形式，和坐標(biāo)的形式，x，y是剛好相反的
            n++;
            if (rn.indexOf(n) != -1) {
                // 如果這個條件成立，說明現(xiàn)在循環(huán)到的索引在雷的數(shù)組里面找到了，那就表明這個索引對應(yīng)的是個雷
                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;
        // 阻止右鍵出菜單事件
    }

    // 剩余雷數(shù)
    this.mineNumDom = document.querySelector('.mineNum');
    this.mineNumDom.innerHTML = this.surplusMine;
};


// 找某個方格周圍的八個格子
Mine.prototype.getAround = function (square) {
    var x = square.x,
        y = square.y;
    var result = []; // 把找到的格子的坐標(biāo)返回出去（二維數(shù)組）
    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) ||
                // 表示循環(huán)到自己
                this.squares[j][i].type == 'mine'
                // 表示循環(huán)到（周圍的格子）雷 (注意i和j表示的是坐標(biāo)，而squares存儲的是行和列)
            ) {
                continue;
            }
            // 要以行與列的形式返回出去，因為到時候需要它去取數(shù)組里的數(shù)據(jù)
            result.push([j, i]);
        }
    }
    return result;
}

// 更新所有的數(shù)字
Mine.prototype.updateNum = function () {
    for (var i = 0; i < this.tr; i++) {
        for (var j = 0; j < this.td; j++) {
            // 要更新的是雷周圍的數(shù)字
            if (this.squares[i][j].type == 'number') {
                continue;
            }
            var num = this.getAround(this.squares[i][j]); // 獲取到每一個雷周圍的數(shù)字
            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;
    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') {
            // 用戶點擊的是數(shù)字
            obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];

            // 點到了數(shù)字零
            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) {
                            // 如果以某個格子為中心，找到的某個格子為零，那就接著調(diào)用（遞歸）
                            if (!This.tds[x][y].check) {
                                // 給對應(yīng)的td 添加一條屬性，如果找過的話，這個值就為true，下一次就不會再找了，防止函數(shù)調(diào)用棧出問題
                                This.tds[x][y].check = true;
                                getAllZero(This.squares[x][y]);
                            }

                        } else {
                            // 如果以某個格子為中心找到的四周的值不為零，就把數(shù)字顯示出來
                            This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }

                }
                getAllZero(curSquare);
            }

        } else {
            // 用戶點擊的是雷
            this.gameOver(obj);
        }
    }
    if (ev.which == 3) {
        // 用戶點擊的是右鍵
        // 如果右擊的是一個數(shù)字，就不能點擊
        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) {
            // 剩余的雷的數(shù)量為0，表示用戶已經(jīng)標(biāo)完小紅旗了，這時候要判斷游戲是成功還是結(jié)束
            if (this.allRight == true) {
                // 這個條件成立，說明用戶全部標(biāo)對了
                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();
            }
        }
    }
}

// 游戲失敗函數(shù)
Mine.prototype.gameOver = function (clickTd) {
    /* 
        1.顯示所有的雷
        2.取消所有格子的點擊事件
        3.給點中的格子標(biāo)紅
    */
    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';
    }
}

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

// 添加 button 的功能
var btns = document.getElementsByTagName('button');
var mine = null; // 用來存儲生成的實例
var ln = 0; // 用來處理當(dāng)前選中的狀態(tài)
var arr = [
    [9, 9, 10],
    [16, 16, 40],
    [28, 28, 99]
]; //不同級別的行數(shù)，列數(shù)，雷數(shù)
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();
        }
    }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: