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

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

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

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

項目展示圖

項目準備

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

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

之后是html結構

html

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

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

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

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

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

之后是 game 的游戲進行區(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ū)域，讓主內容居中

#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 標簽，我們的掃雷主要的游戲區(qū)域就是通過table標簽來實現(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;
}

最后，我們預定義一些樣式

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

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

最后還有一個就是游戲內，一些方塊會現(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 的構造函數(shù)

Mine 構造函數(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;       // 右擊標注的小紅旗是否全部是雷，用來判斷用戶是否游戲成功
    this.parent = document.querySelector('.gameBox');
}

生成隨機的雷的排布

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

那么我們寫出我們的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ù)組當中
            domTd.pos = [i, j];                         // 把格子對應的行和列村到格子身上，為了下面通過這個值去數(shù)組里面取到對應的數(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;                                 // 用來找到對應的索引格子
    for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        for (var j = 0; j < this.td; j++) {
            // 取一個方塊在數(shù)組里的數(shù)據(jù)，要使用行與列的形式存取
            // 找方塊周圍的方塊的時候，要用坐標的形式去取
            // 行與列的形式，和坐標的形式，x，y是剛好相反的
            n++;
            if (rn.indexOf(n) != -1) {
                // 如果這個條件成立，說明現(xiàn)在循環(huán)到的索引在雷的數(shù)組里面找到了，那就表明這個索引對應的是個雷
                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 = []; // 把找到的格子的坐標返回出去（二維數(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表示的是坐標，而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) {
                            // 如果以某個格子為中心，找到的某個格子為零，那就接著調用（遞歸）
                            if (!This.tds[x][y].check) {
                                // 給對應的td 添加一條屬性，如果找過的話，這個值就為true，下一次就不會再找了，防止函數(shù)調用棧出問題
                                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)標完小紅旗了，這時候要判斷游戲是成功還是結束
            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函數(shù)

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; // 用來處理當前選中的狀態(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;                              // 右擊標注的小紅旗是否全部是雷，用來判斷用戶是否游戲成功
    this.parent = document.querySelector('.gameBox');
}

// 生成n個不重復的數(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ù)組當中
            domTd.pos = [i, j];                         // 把格子對應的行和列村到格子身上，為了下面通過這個值去數(shù)組里面取到對應的數(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;                                 // 用來找到對應的索引格子
    for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        for (var j = 0; j < this.td; j++) {
            // 取一個方塊在數(shù)組里的數(shù)據(jù)，要使用行與列的形式存取
            // 找方塊周圍的方塊的時候，要用坐標的形式去取
            // 行與列的形式，和坐標的形式，x，y是剛好相反的
            n++;
            if (rn.indexOf(n) != -1) {
                // 如果這個條件成立，說明現(xiàn)在循環(huán)到的索引在雷的數(shù)組里面找到了，那就表明這個索引對應的是個雷
                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 = []; // 把找到的格子的坐標返回出去（二維數(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表示的是坐標，而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) {
                            // 如果以某個格子為中心，找到的某個格子為零，那就接著調用（遞歸）
                            if (!This.tds[x][y].check) {
                                // 給對應的td 添加一條屬性，如果找過的話，這個值就為true，下一次就不會再找了，防止函數(shù)調用棧出問題
                                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)標完小紅旗了，這時候要判斷游戲是成功還是結束
            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();
            }
        }
    }
}

// 游戲失敗函數(shù)
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';
    }
}

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

// 添加 button 的功能
var btns = document.getElementsByTagName('button');
var mine = null; // 用來存儲生成的實例
var ln = 0; // 用來處理當前選中的狀態(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
掃雷

原生JS:Date對象全面解析
下面小編就為大家?guī)硪黄鶭S:Date對象全面解析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
Base64編碼加密JS代碼網(wǎng)頁版
Base64編碼加密JS代碼網(wǎng)頁版，在文本框中輸入任意字符串，即可將該字符串按Base64編碼進行加密，也可將任意Base64編碼的字符解密顯示正常值
2013-03-03
JavaScript實踐之使用Canvas開發(fā)一個可配置的大轉盤抽獎功能
公司項目搞優(yōu)惠活動,讓做一個轉盤抽獎的活動,這篇文章主要給大家介紹了關于JavaScript實踐之使用Canvas開發(fā)一個可配置的大轉盤抽獎功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
JavaScript NaN和Infinity特殊值 [譯]
本文要講的是兩個特殊值,NaN和Infinity,返回這兩個值的操作通常都應該返回正常的數(shù)字
2012-09-09
使用layui的router來進行傳參的實現(xiàn)方法
今天小編就為大家分享一篇使用layui的router來進行傳參的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
B/S(Web)實時通訊解決方案分享
這篇文章主要為大家分享了B/S(Web)實時通訊的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
electron如何使用typescript
引入 TypeScript 到 Electron 項目可以幫助你捕捉錯誤并在編寫代碼時提供更好的自動完成和文檔，這篇文章主要介紹了electron使用typescript的步驟,需要的朋友可以參考下
2024-04-04
JavaScript函數(shù)的4種調用方法詳解
了解函數(shù)的調用過程有助于深入學習與分析JavaScript代碼。本文是JavaScript高級這個系列中的第三篇文章，主要介紹JavaScript中函數(shù)的四種使用形式
2014-04-04
js 可拖動列表實現(xiàn)代碼
前天做了個樹形菜單，今天接著讓它可拖動。非常不錯的效果，需要的朋友可以參考下。
2011-12-12
深度解析TypeScript裝飾器
TypeScript?是一種強類型的超集?JavaScript,它為開發(fā)者提供了靜態(tài)類型檢查、代碼提示以及更好的可維護性,本文將深入解析?TypeScript?裝飾器,從基礎概念到高級用法,逐步探討其作用、原理以及實際應用場景,以幫助你更好地理解和利用這一功能,需要的朋友可以參考下
2023-09-09