js實現(xiàn)掃雷源代碼
更新時間：2020年11月27日 17:09:39 作者：木子three石
這篇文章主要為大家詳細介紹了js實現(xiàn)掃雷源代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
經(jīng)過一段時間學(xué)習(xí)，對javascript有了一個初步的了解自己制作了一個掃雷，源代碼+詳細注釋放在后面，先看下效果圖。
初始化界面：
游戲界面：
難易程度切換：
游戲結(jié)束：
思路
采用構(gòu)造函數(shù)的形式進行全局開發(fā)
生成游戲棋盤
- 利用雙層for循環(huán)創(chuàng)建設(shè)定的棋盤大小
- 為每個單元格的dom元素創(chuàng)建一個屬性，該屬性用于保存單元格的所有信息，如x,y坐標(biāo),value,是否為雷等
隨機生成炸彈
- 利用隨機數(shù)，隨機生成炸彈x,y坐標(biāo)，并將符合該坐標(biāo)信息的單元格的屬性更改為雷
- 炸彈是在用戶第一次點擊的時候生成，防止用戶第一次點擊到炸彈
- 將生成的每個炸彈信息都保存到一個this變量中，方便后續(xù)使用
- 遍歷每個炸彈周圍的非炸彈方格，每遍歷一次value值+1
鼠標(biāo)左鍵點擊
- 點擊的時候需要考慮該單元格是否有被標(biāo)記小旗子（isFlag屬性），如果有則無法點擊
- 判斷是雷還是數(shù)字，雷的話則游戲結(jié)束，數(shù)字則繼續(xù)判斷是否等于0，等于0則使用遞歸顯示空白區(qū)域
- 每次打開一個單元格，需要更改該單元格的isOpen屬性，表示單元格被打開
鼠標(biāo)右鍵點擊
- 點擊時需要考慮該單元格的isOpen屬性是否被打開，打開的話則無法點擊
- 當(dāng)該單元格沒有標(biāo)記旗幟時標(biāo)記，如果有標(biāo)記旗幟則取消標(biāo)記
- 每標(biāo)記一個方格，剩余炸彈數(shù)量-1，取消標(biāo)記則+1
游戲結(jié)束
- 當(dāng)左鍵點擊到炸彈的時候游戲結(jié)束。失敗
- 剩余炸彈數(shù)量為0時。判斷旗幟標(biāo)記是否正確，正確游戲勝利，標(biāo)記有誤則失敗
HTML代碼
超短的HTML代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/index.css" > </head> <body> <div class="main"> <header class="header"> <button>初級</button> <button>中級</button> <button>高級</button> </header> <div class="gameBox" id="gameBox"></div> <footer class="footer">剩余雷數(shù)量：<span id="surplusMine"></span> </footer> </div> </body> <script src="js/index.js"></script> </html>
CSS代碼
.main .header {
text-align: center;
margin: 20px auto;
}
.main .gameBox table {
border-spacing: 1px;
background-color: rgb(170, 170, 170);
text-align: center;
margin: 20px auto;
}
.main .gameBox table td.mine {
/* 游戲結(jié)束時顯示 */
border: none;
background: url(./../img/mine.png) no-repeat;
background-size: 90% 90%;
background-color: #e9e6e6;
background-position: 2px 0;
}
.main .gameBox table td.targetMine {
/* 游戲結(jié)束時顯示，觸發(fā)雷的單元格 */
border: none;
background: url(./../img/mine.png) no-repeat;
background-size: 90% 90%;
background-color: #ff4b4b;
background-position: 2px 0;
}
.main .gameBox table td.targetFlag {
/* 右鍵標(biāo)記方格時顯示 */
background: url(./../img/flag.png) no-repeat;
background-size: 90% 90%;
background-position: 2px 0;
background-color: #e9e6e6;
}
.main .gameBox table td {
/* 單元格初始樣式 */
width: 20px;
height: 20px;
box-sizing: border-box;
border: 2px solid;
border-color: #eee #ccc #ccc #eee;
background-color: #e9e6e6;
font-size: 1px;
font-weight: 800;
}
.gameBox table td.zero,
.gameBox table td.one,
.gameBox table td.two,
.gameBox table td.three,
.gameBox table td.four,
.gameBox table td.five,
.gameBox table td.six,
.gameBox table td.seven,
.gameBox table td.eight,
.gameBox table td.nine {
border: none;
background-color: rgb(211, 200, 200);
}
.gameBox table td.zero {}
.gameBox table td.one {
color: blue;
}
.gameBox table td.two {
color: rgb(5, 93, 5);
}
.gameBox table td.three {
color: #008c8c;
}
.gameBox table td.four {
color: crimson;
}
.gameBox table td.five {
color: rgb(228, 91, 0);
}
.gameBox table td.six {
color: darkorange;
}
.gameBox table td.seven {
color: rgb(193, 196, 50);
}
.gameBox table td.eight {
color: pink;
}
.main .footer {
text-align: center;
}
javaScript代碼
核心代碼
function Game(tr, td, mineNum) {
this.td = td;
this.tr = tr;
this.mineNum = mineNum; //存儲預(yù)設(shè)或設(shè)定的炸彈總數(shù)，用于后續(xù)判斷是否勝利使用
this.surplusMine = 0; //剩余雷數(shù)
this.mineInfo = []; //用于接收隨機生成的雷的信息
this.tdsArr = [] //存放單元格的信息
this.isPlay = false; //是否開始玩
this.openClass = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]
this.gameBox = document.getElementById("gameBox");
this.table = document.createElement("table"); //生成table標(biāo)簽
this.footerNum = document.getElementById("surplusMine"); //剩余炸彈數(shù)量顯示框
}
Game.prototype.creatDom = function() { //創(chuàng)建游戲區(qū)域，在玩家第一次點擊游戲區(qū)域的時候執(zhí)行
this.table.oncontextmenu = function() { return false }; //清除默認右鍵單機事件
for (var i = 0; i < this.gameBox.children.length; i++) { //為防止重新開始游戲時，重復(fù)生成多個table，在添加之前先刪除之前的
var childNod = this.gameBox.children[i];
this.gameBox.removeChild(childNod);
}
for (var i = 0; i < this.tr; i++) {
var tr = document.createElement("tr");
this.tdsArr[i] = []; //為每一行生成一個數(shù)組
for (var j = 0; j < this.td; j++) {
var td = document.createElement("td");
tr.appendChild(td); //將生成的td插入到tr中
this.tdsArr[i][j] = td;
td.info = { //info屬性包括了單元格的所有信息，很重要
type: "number", //格子類型，用于判斷是否時炸彈
x: i, //行
y: j, //列
value: 0, //當(dāng)該格子周圍有炸彈時顯示該數(shù)值，生成炸彈的時候會++
isOpen: false, //判斷該單元格是否被打開
isFlag: false //判斷是否有標(biāo)記flag
}
}
this.table.appendChild(tr); //見tr插入到table中
}
this.gameBox.appendChild(this.table);
}
Game.prototype.creatMine = function(event, target) { //生成炸彈，該方法會在用戶第一次點擊棋盤的時候執(zhí)行一次
var This = this;
for (var i = 0; true; i++) { //隨機生成炸彈，生成扎當(dāng)數(shù)與設(shè)定扎當(dāng)書mineNum相同時終止循環(huán)
var randomX = Math.floor(Math.random() * this.tr), //隨機生成炸彈的行數(shù)
randomY = Math.floor(Math.random() * this.td); //隨機生成炸彈的列數(shù)
// console.log(randomX + " " + randomY)
if (target.info.x != randomX || target.info.y != randomY) { //保證第一次點擊的時候不是炸彈
if (this.tdsArr[randomX][randomY].info.type != "mine") { //保證每次生成的雷的位置不重復(fù)
this.tdsArr[randomX][randomY].info.type = "mine"; //單元格更改屬性為雷
this.surplusMine++; //生成雷的數(shù)量+1
this.mineInfo.push(this.tdsArr[randomX][randomY]); //將生成的雷的信息存放到this變量中，方便后續(xù)使用
}
if (this.surplusMine >= this.mineNum) { //當(dāng)生成的炸彈數(shù)量等于設(shè)定的數(shù)量后跳出循環(huán)
break;
}
}
}
//為每個炸彈周圍的方格添加數(shù)字
for (var i = 0; i < this.mineInfo.length; i++) {
var around = this.getAround(this.mineInfo[i], This); //獲取每個炸彈的周圍方格
// console.log(this.getAround(this.mineInfo[i], This))
for (var j = 0; j < around.length; j++) { //將周圍每個方格的value++
around[j].info.value += 1;
}
}
}
Game.prototype.getAround = function(thisCell, This) { //獲取某個方格的周圍非炸彈方格，需要傳遞一個單元格dom元素，Game的this
var x = thisCell.info.x, //行
y = thisCell.info.y, //列
result = [];
// x-1,y-1 x-1,y x-1,y+1
// x,y-1 x,y x,y+1
// x+1,y-1 x+1y x+1,y+1
for (var j = x - 1; j <= x + 1; j++) {
for (var k = y - 1; k <= y + 1; k++) {
if ( //游戲區(qū)域的邊界，行數(shù)x和列數(shù)y不能為負數(shù)，且不能超過設(shè)定的行數(shù)和列數(shù)
j < 0 ||
k < 0 ||
j > (This.tr - 1) ||
k > (This.td - 1) ||
//同時跳過自身和周邊是雷的方格
This.tdsArr[j][k].info.type == "mine" ||
(j == x && k == y)
) {
continue; //滿足上述條件是則跳過當(dāng)此循環(huán)；
} else {
result.push(This.tdsArr[j][k]) //將符合的單元格push到result中返回
}
}
}
return result;
}
Game.prototype.lifeMouse = function(event, target) { //左鍵點擊事件
var This = this; //用變量的方式將Game的this傳遞到函數(shù)中
var noOpen = 0; //沒有被打開的格子數(shù)量
if (!target.info.isFlag) { //表示該必須沒有被右鍵標(biāo)記才能鼠標(biāo)左擊
if (target.info.type == "number") { //是數(shù)字時,則可視化
function getAllZero(target, This) { //遞歸函數(shù)
// console.log(target.info)
if (target.info.isFlag) { //當(dāng)這個單元格之前有被標(biāo)記過flag時，則將剩余炸彈數(shù)+1
This.surplusMine += 1;
target.info.isFlag = false; //單元格被打開后初始化flag
}
if (target.info.value == 0) { //等于格子的value等于0的時候
target.className = This.openClass[target.info.value]; //可視化
target.info.isOpen = true; //表示該單元格被打開
var thisAround = This.getAround(target, This); //獲取該單元格周圍的格子信息
for (var i = 0; i < thisAround.length; i++) {
// console.log(thisAround[i].info.isOpen)
if (!thisAround[i].info.isOpen) { //遞歸的條件，當(dāng)格子的open為true時不執(zhí)行
getAllZero(thisAround[i], This) //執(zhí)行遞歸
}
}
} else {
target.innerHTML = target.info.value;
target.className = This.openClass[target.info.value]; //可視化
target.info.isOpen = true; //表示單元格被打開
target.info.isFlag = false; //單元格被打開后初始化flag
}
}
getAllZero(target, This); //首次執(zhí)行
//每次鼠標(biāo)左鍵點擊的時候都需要檢查一下沒有被打開的方格數(shù)量，每有一個則noOpen++
for (var i = 0; i < this.tr; i++) {
for (var j = 0; j < this.tr; j++) {
if (this.tdsArr[i][j].info.isOpen == false) {
noOpen++;
}
}
}
//當(dāng)noOpen的數(shù)量與炸彈數(shù)量相同時，說明剩余的方格全是雷，游戲通過
if (noOpen == this.mineNum) {
console.log(noOpen)
this.gameWin();
}
} else { //點擊到了炸彈，游戲結(jié)束
this.gameOver(target)
}
}
}
Game.prototype.rightMouse = function(target) { //鼠標(biāo)右鍵點擊執(zhí)行
if (!target.info.isOpen) {
if (!target.info.isFlag) { //標(biāo)記
target.className = "targetFlag"; //顯示旗幟
target.info.isFlag = true; //表示該方格已經(jīng)被標(biāo)記
this.surplusMine -= 1; //每標(biāo)記一個方格，剩余炸彈數(shù)量-=1
// console.log(this.surplusMine)
} else { //取消標(biāo)記
target.className = ""; //去掉旗幟
target.info.isFlag = false;
this.surplusMine += 1;
// console.log(this.surplusMine)
}
var isWin = true;
if (this.surplusMine == 0) { //標(biāo)記完所有flag時，遍歷所有單元格
// console.log(this.mineInfo.length)
for (var i = 0; i < this.mineInfo.length; i++) {
console.log(this.mineInfo[i].info.isFlag)
if (!this.mineInfo[i].info.isFlag) { //檢查每個雷的isFlag屬性是否被標(biāo)記，只要有一個為false則輸?shù)粲螒?
isWin = false;
this.gameOver(target, 1);
break;
}
}
isWin ? this.gameWin(1) : 0; //三目運算符號
}
// if (this.surplusMine == 0) { //標(biāo)記完所有flag時，遍歷所有單元格
// for (var i; i < this.tr; i++) {
// for (var j; j < this.td; j++) {
// if()
// }
// }
// }
}
}
Game.prototype.gameOver = function(target, code) { //游戲結(jié)束，code為觸發(fā)代碼，當(dāng)旗用完了時為1，點擊到炸彈為0
// console.log(this.mineInfo)
var mineInfoLen = this.mineInfo.length;
for (var i = 0; i < mineInfoLen; i++) { //顯示每個雷的位置
this.mineInfo[i].className = "mine";
}
this.table.onmousedown = false; //取消鼠標(biāo)事件
if (code) {
alert("旗幟用完了，沒有排除所有雷，游戲結(jié)束")
} else {
target.className = "targetMine"; //觸發(fā)雷標(biāo)紅色
alert("你被炸彈炸死了，游戲結(jié)束")
}
}
Game.prototype.gameWin = function(code) { //游戲勝利
if (code) {
alert("你成功標(biāo)記所有地雷，游戲通過")
} else {
alert("你找到了所有安全區(qū)域，游戲通過")
}
this.table.onmousedown = false;
}
Game.prototype.play = function() {
var This = this; //需要將this傳遞到事件函數(shù)中使用
this.table.onmousedown = function(event) {
event = event || window.event; //兼容IE
target = event.target || event.srcElement //兼容IE
if (!this.isPlay) { //首次點擊初始化棋盤，隨機生成炸彈
this.isPlay = true;
This.creatMine(event, target);
}
if (event.button == 0) { //鼠標(biāo)左鍵點擊時執(zhí)行
This.lifeMouse(event, target);
} else if (event.button == 2) { //右鍵點擊執(zhí)行
This.rightMouse(target)
}
This.footerNum.innerHTML = This.surplusMine; //每次點擊右鍵，刷新頁面下方的剩余雷數(shù)
}
}
Game.prototype.tablePos = function() { //將table居中顯示
var width = this.table.offsetWidth,
height = this.table.offsetHeight;
// console.log(this.table.offsetWidth)
this.table.style.width = width + "px ";
this.table.style.height = height + "px "
}
function addEvent(elem, type, handle) { //添加事件函數(shù)
if (elem.addEventListener) { //w3c標(biāo)準(zhǔn)
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) { //IE9及以下
elem.attachEvent("on" + type, function() {
handle.call(elem);
})
} else { //其他情況
elem["on" + type] = handle;
}
}
Game.prototype.setDegree = function() { //調(diào)整難度
var button = document.getElementsByTagName("button");
addEvent(button[0], "click", function() { //簡單
var game = new Game(10, 10, 10);
game.creatDom();
game.play();
game.tablePos();
});
addEvent(button[1], "click", function() { //一般
var game = new Game(16, 16, 50);
game.creatDom();
game.play();
game.tablePos();
});
addEvent(button[2], "click", function() { //困難
var game = new Game(30, 30, 125);
game.creatDom();
game.play();
game.tablePos();
});
}
// 默認棋盤
var game = new Game(10, 10, 10);
game.creatDom();
game.play();
game.tablePos();
game.setDegree()
總結(jié)一下，該游戲個人覺得難點有4個：
- 沒有思路，在bilibili看了一個教學(xué)視頻，但是比較難理解，在原有基礎(chǔ)上增加了自己的一些想法
- 遞歸
- 獲取某一個方格周圍的八個方格
- 多層的if嵌套和循環(huán)
缺點：
- 性能不佳，存在大量for循環(huán),且沒有優(yōu)化
- 某些時候界面顯示的剩余炸彈數(shù)量不準(zhǔn)確（已修復(fù)）
- 代碼冗余較多
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法
這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關(guān)配置文件設(shè)置技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了瀏覽器調(diào)試動態(tài)js腳本的方法，文中給大家?guī)韮煞N調(diào)試方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
深入淺析javascript立即執(zhí)行函數(shù)
在Javascript中，任何function在執(zhí)行的時候都會創(chuàng)建一個執(zhí)行上下文，因為為function聲明的變量和function有可能只在該function內(nèi)部，這個上下文，在調(diào)用function的時候，提供了一種簡單的方式來創(chuàng)建自由變量或私有子function。2015-10-10
這篇文章主要介紹了JavaScript是如何實現(xiàn)繼承的，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了mui 打開新窗口的方式總結(jié)及注意事項,需要的朋友可以參考下2017-08-08
JavaScript+html實現(xiàn)前端頁面隨機二維碼驗證
這篇文章主要為大家詳細介紹了JavaScript+html實現(xiàn)前端頁面隨機二維碼驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了純js封裝的ajax功能函數(shù)與用法,結(jié)合實例形式分析了基于JavaScript封裝的ajax功能函數(shù)定義及與php后臺交互相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
本文給大家分享的是在ECShop的項目中使用到的一個小功能，使用JavaScript實現(xiàn)彈出窗口中增加確定取消按鈕，有需要的小伙伴可以參考下2016-06-06
JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析
這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)之this和箭頭函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
簡單純js實現(xiàn)點擊切換TAB標(biāo)簽實例
選項卡效果代碼，無jq,JS來實現(xiàn)，灰色風(fēng)格，沒有怎么美化，或許看上去比較普通，不過兼容性和操作起來挺舒服的，風(fēng)格適用于大部分的網(wǎng)站，或許你會用得上。2015-08-08