溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JS實(shí)現(xiàn)掃雷項(xiàng)目的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
一樣的，我們先是準(zhǔn)備出三個(gè)文件夾，以及根目錄下的index.html 文件
然后是兩張圖片（地雷 和 旗子）
之后是html結(jié)構(gòu)
首先是最外層的 游戲內(nèi)容區(qū)域的div 取名id為mine
<div id="mine"> </div>
之后是游戲內(nèi)容區(qū)域中最上面的四個(gè)按鈕，我們用四個(gè)button標(biāo)簽來表示，并且用一個(gè)div來包裹起來
并且給初級(jí)按鈕一個(gè)最初的選中的樣式
<div class="level"> <button class="active">初級(jí)</button> <button>中級(jí)</button> <button>高級(jí)</button> <button>重新開始</button> </div>
之后是 game 的游戲進(jìn)行區(qū)域，也就是雷區(qū)
<div class="gameBox"> </div>
最后一個(gè)是提示區(qū)域
<div class="info"> 剩余雷數(shù)：<span class="mineNum"></span> <br> <span class="tips">左鍵掃雷，右鍵插旗，再次點(diǎn)擊右鍵拔旗</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">初級(jí)</button> <button>中級(jí)</button> <button>高級(jí)</button> <button>重新開始</button> </div> <div class="gameBox"> </div> <div class="info"> 剩余雷數(shù)：<span class="mineNum"></span> <br> <span class="tips">左鍵掃雷，右鍵插旗，再次點(diǎn)擊右鍵拔旗</span> </div> </div> <script src="JS/index.js"></script> </body> </html>
首先呢我們給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)簽來實(shí)現(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;
}最后還有一個(gè)就是游戲內(nèi)，一些方塊會(huì)現(xiàn)實(shí)數(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;
}思路
這次我們打算在原型鏈上編程
首先，我們先寫出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 = []; // 存儲(chǔ)所有方塊的信息，是一個(gè)二維數(shù)組，按照行與列的順序排放，存取都按照行列方式
this.tds = []; // 存儲(chǔ)所有單元格的DOM
this.surplusMine = mineNum; // 剩余雷的數(shù)量
this.allRight = false; // 右擊標(biāo)注的小紅旗是否全部是雷，用來判斷用戶是否游戲成功
this.parent = document.querySelector('.gameBox');
}生成隨機(jī)的雷的排布
我們構(gòu)造函數(shù)中傳進(jìn)去了三個(gè)參數(shù)，行數(shù)，列數(shù)，以及需要的雷數(shù)，我們的思路是這樣的，我們游戲是在table里面進(jìn)行，table一共有 tr * td 個(gè)格子，那么我們可以創(chuàng)建一個(gè) 長(zhǎng)度為 tr * td 的 數(shù)組，然后，給數(shù)組賦值，每個(gè)值對(duì)應(yīng)一個(gè)方格，最后再給數(shù)組亂序，取出前 mineNum（需要的雷數(shù)） 個(gè)， 這mineNum個(gè)方格所對(duì)應(yīng)的就是我們的地雷的方格
那么我們寫出 我們的js代碼
Mine.prototype.randomNum = function () {
var square = new Array(this.tr * this.td); // 生成一個(gè)空數(shù)組 長(zhǎng)度為格子總數(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)建表格
我們雖然上述把雷的位置取出了，但是，我們?cè)賱?chuàng)建游戲區(qū)域的時(shí)候，并沒必要，在創(chuàng)建的時(shí)候就將邏輯寫入，我們可以在點(diǎn)擊小方格的時(shí)候，來判斷其位置是否是雷還是空即可
因此，我們先寫出創(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]; // 把格子對(duì)應(yīng)的行和列村到格子身上，為了下面通過這個(gè)值去數(shù)組里面取到對(duì)應(yīng)的數(shù)據(jù)
domTd.onmousedown = function () {
This.play(event, this); // 大的This 指的是實(shí)例對(duì)象 小的this指的是點(diǎn)擊的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 = ''; // 避免多次點(diǎn)擊創(chuàng)建多個(gè)
this.parent.appendChild(table);
};其中的 This.play 是我們點(diǎn)擊方塊之后的判斷，判斷是 雷 還是 空
再寫play函數(shù)之前，我們還有一些其他的邏輯需要編寫
初始化函數(shù)
Mine.prototype.init = function () {
// this.randomNum();
var rn = this.randomNum(); // 雷在格子里的位置
var n = -1; // 用來找到對(duì)應(yīng)的索引格子
for (var i = 0; i < this.tr; i++) {
this.squares[i] = [];
for (var j = 0; j < this.td; j++) {
// 取一個(gè)方塊在數(shù)組里的數(shù)據(jù)，要使用行與列的形式存取
// 找方塊周圍的方塊的時(shí)候，要用坐標(biāo)的形式去取
// 行與列的形式，和坐標(biāo)的形式，x，y是剛好相反的
n++;
if (rn.indexOf(n) != -1) {
// 如果這個(gè)條件成立，說明現(xiàn)在循環(huán)到的索引在雷的數(shù)組里面找到了，那就表明這個(gè)索引對(duì)應(yīng)的是個(gè)雷
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ù)
// 找某個(gè)方格周圍的八個(gè)格子
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存儲(chǔ)的是行和列)
) {
continue;
}
// 要以行與列的形式返回出去，因?yàn)榈綍r(shí)候需要它去取數(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]); // 獲取到每一個(gè)雷周圍的數(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') { // 后面的條件是為了用戶右鍵之后不能點(diǎn)擊
// 點(diǎn)擊的是左鍵
var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
// cl 存儲(chǔ)className
if (curSquare.type == 'number') {
// 用戶點(diǎn)擊的是數(shù)字
obj.innerHTML = curSquare.value;
obj.className = cl[curSquare.value];
// 點(diǎn)到了數(shù)字零
if (curSquare.value == 0) {
/*
遞歸思路：
1.顯示自己
2.查找四周
1) 顯示四周（如果四周的值不為零，那就顯示到這，不需要再找了）
2）如果值為零了
a.顯示自己
b.找四周（如果四周的值不為零，那就顯示到這，不需要再找了）
I.顯示自己
II.找四周（如果四周的值不為零，那就顯示到這，不需要再找了）
。。。。。。
*/
obj.innerHTML = ''; // 顯示為空
function getAllZero(square) {
var around = This.getAround(square); // 找到了周圍N個(gè)格子
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) {
// 如果以某個(gè)格子為中心，找到的某個(gè)格子為零，那就接著調(diào)用（遞歸）
if (!This.tds[x][y].check) {
// 給對(duì)應(yīng)的td 添加一條屬性，如果找過的話，這個(gè)值就為true，下一次就不會(huì)再找了，防止函數(shù)調(diào)用棧出問題
This.tds[x][y].check = true;
getAllZero(This.squares[x][y]);
}
} else {
// 如果以某個(gè)格子為中心找到的四周的值不為零，就把數(shù)字顯示出來
This.tds[x][y].innerHTML = This.squares[x][y].value;
}
}
}
getAllZero(curSquare);
}
} else {
// 用戶點(diǎn)擊的是雷
this.gameOver(obj);
}
}
if (ev.which == 3) {
// 用戶點(diǎn)擊的是右鍵
// 如果右擊的是一個(gè)數(shù)字，就不能點(diǎn)擊
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)完小紅旗了，這時(shí)候要判斷游戲是成功還是結(jié)束
if (this.allRight == true) {
// 這個(gè)條件成立，說明用戶全部標(biāo)對(duì)了
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.取消所有格子的點(diǎn)擊事件
3.給點(diǎn)中的格子標(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; // 用來存儲(chǔ)生成的實(shí)例
var ln = 0; // 用來處理當(dāng)前選中的狀態(tài)
var arr = [
[9, 9, 10],
[16, 16, 40],
[28, 28, 99]
]; //不同級(jí)別的行數(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 = []; // 存儲(chǔ)所有方塊的信息，是一個(gè)二維數(shù)組，按照行與列的順序排放，存取都按照行列方式
this.tds = []; // 存儲(chǔ)所有單元格的DOM
this.surplusMine = mineNum; // 剩余雷的數(shù)量
this.allRight = false; // 右擊標(biāo)注的小紅旗是否全部是雷，用來判斷用戶是否游戲成功
this.parent = document.querySelector('.gameBox');
}
// 生成n個(gè)不重復(fù)的數(shù)字
Mine.prototype.randomNum = function () {
var square = new Array(this.tr * this.td); // 生成一個(gè)空數(shù)組 長(zhǎng)度為格子總數(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]; // 把格子對(duì)應(yīng)的行和列村到格子身上，為了下面通過這個(gè)值去數(shù)組里面取到對(duì)應(yīng)的數(shù)據(jù)
domTd.onmousedown = function () {
This.play(event, this); // 大的This 指的是實(shí)例對(duì)象 小的this指的是點(diǎn)擊的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 = ''; // 避免多次點(diǎn)擊創(chuàng)建多個(gè)
this.parent.appendChild(table);
};
Mine.prototype.init = function () {
// this.randomNum();
var rn = this.randomNum(); // 雷在格子里的位置
var n = -1; // 用來找到對(duì)應(yīng)的索引格子
for (var i = 0; i < this.tr; i++) {
this.squares[i] = [];
for (var j = 0; j < this.td; j++) {
// 取一個(gè)方塊在數(shù)組里的數(shù)據(jù)，要使用行與列的形式存取
// 找方塊周圍的方塊的時(shí)候，要用坐標(biāo)的形式去取
// 行與列的形式，和坐標(biāo)的形式，x，y是剛好相反的
n++;
if (rn.indexOf(n) != -1) {
// 如果這個(gè)條件成立，說明現(xiàn)在循環(huán)到的索引在雷的數(shù)組里面找到了，那就表明這個(gè)索引對(duì)應(yīng)的是個(gè)雷
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;
};
// 找某個(gè)方格周圍的八個(gè)格子
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存儲(chǔ)的是行和列)
) {
continue;
}
// 要以行與列的形式返回出去，因?yàn)榈綍r(shí)候需要它去取數(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]); // 獲取到每一個(gè)雷周圍的數(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') { // 后面的條件是為了用戶右鍵之后不能點(diǎn)擊
// 點(diǎn)擊的是左鍵
var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
// cl 存儲(chǔ)className
if (curSquare.type == 'number') {
// 用戶點(diǎn)擊的是數(shù)字
obj.innerHTML = curSquare.value;
obj.className = cl[curSquare.value];
// 點(diǎn)到了數(shù)字零
if (curSquare.value == 0) {
/*
遞歸思路：
1.顯示自己
2.查找四周
1) 顯示四周（如果四周的值不為零，那就顯示到這，不需要再找了）
2）如果值為零了
a.顯示自己
b.找四周（如果四周的值不為零，那就顯示到這，不需要再找了）
I.顯示自己
II.找四周（如果四周的值不為零，那就顯示到這，不需要再找了）
。。。。。。
*/
obj.innerHTML = ''; // 顯示為空
function getAllZero(square) {
var around = This.getAround(square); // 找到了周圍N個(gè)格子
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) {
// 如果以某個(gè)格子為中心，找到的某個(gè)格子為零，那就接著調(diào)用（遞歸）
if (!This.tds[x][y].check) {
// 給對(duì)應(yīng)的td 添加一條屬性，如果找過的話，這個(gè)值就為true，下一次就不會(huì)再找了，防止函數(shù)調(diào)用棧出問題
This.tds[x][y].check = true;
getAllZero(This.squares[x][y]);
}
} else {
// 如果以某個(gè)格子為中心找到的四周的值不為零，就把數(shù)字顯示出來
This.tds[x][y].innerHTML = This.squares[x][y].value;
}
}
}
getAllZero(curSquare);
}
} else {
// 用戶點(diǎn)擊的是雷
this.gameOver(obj);
}
}
if (ev.which == 3) {
// 用戶點(diǎn)擊的是右鍵
// 如果右擊的是一個(gè)數(shù)字，就不能點(diǎn)擊
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)完小紅旗了，這時(shí)候要判斷游戲是成功還是結(jié)束
if (this.allRight == true) {
// 這個(gè)條件成立，說明用戶全部標(biāo)對(duì)了
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.取消所有格子的點(diǎn)擊事件
3.給點(diǎn)中的格子標(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; // 用來存儲(chǔ)生成的實(shí)例
var ln = 0; // 用來處理當(dāng)前選中的狀態(tài)
var arr = [
[9, 9, 10],
[16, 16, 40],
[28, 28, 99]
]; //不同級(jí)別的行數(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();
}
}
}javascript是一種動(dòng)態(tài)類型、弱類型的語言，基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動(dòng)態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。
看完了這篇文章，相信你對(duì)“JS實(shí)現(xiàn)掃雷項(xiàng)目的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼