js實(shí)現(xiàn)掃雷源代碼

更新時(shí)間：2020年11月27日 17:09:39 作者：木子three石

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

經(jīng)過(guò)一段時(shí)間學(xué)習(xí)，對(duì)javascript有了一個(gè)初步的了解自己制作了一個(gè)掃雷，源代碼+詳細(xì)注釋放在后面，先看下效果圖。

初始化界面：

游戲界面：

難易程度切換：

游戲結(jié)束：

思路

采用構(gòu)造函數(shù)的形式進(jìn)行全局開(kāi)發(fā)

生成游戲棋盤

利用雙層for循環(huán)創(chuàng)建設(shè)定的棋盤大小
為每個(gè)單元格的dom元素創(chuàng)建一個(gè)屬性，該屬性用于保存單元格的所有信息，如x,y坐標(biāo),value,是否為雷等

隨機(jī)生成炸彈

利用隨機(jī)數(shù)，隨機(jī)生成炸彈x,y坐標(biāo)，并將符合該坐標(biāo)信息的單元格的屬性更改為雷
炸彈是在用戶第一次點(diǎn)擊的時(shí)候生成，防止用戶第一次點(diǎn)擊到炸彈
將生成的每個(gè)炸彈信息都保存到一個(gè)this變量中，方便后續(xù)使用
遍歷每個(gè)炸彈周圍的非炸彈方格，每遍歷一次value值+1

鼠標(biāo)左鍵點(diǎn)擊

點(diǎn)擊的時(shí)候需要考慮該單元格是否有被標(biāo)記小旗子（isFlag屬性），如果有則無(wú)法點(diǎn)擊
判斷是雷還是數(shù)字，雷的話則游戲結(jié)束，數(shù)字則繼續(xù)判斷是否等于0，等于0則使用遞歸顯示空白區(qū)域
每次打開(kāi)一個(gè)單元格，需要更改該單元格的isOpen屬性，表示單元格被打開(kāi)

鼠標(biāo)右鍵點(diǎn)擊

點(diǎn)擊時(shí)需要考慮該單元格的isOpen屬性是否被打開(kāi)，打開(kāi)的話則無(wú)法點(diǎn)擊
當(dāng)該單元格沒(méi)有標(biāo)記旗幟時(shí)標(biāo)記，如果有標(biāo)記旗幟則取消標(biāo)記
每標(biāo)記一個(gè)方格，剩余炸彈數(shù)量-1，取消標(biāo)記則+1

游戲結(jié)束

當(dāng)左鍵點(diǎn)擊到炸彈的時(shí)候游戲結(jié)束。失敗
剩余炸彈數(shù)量為0時(shí)。判斷旗幟標(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>初級(jí)</button>
   <button>中級(jí)</button>
   <button>高級(jí)</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é)束時(shí)顯示 */
 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é)束時(shí)顯示，觸發(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)記方格時(shí)顯示 */
 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; //存儲(chǔ)預(yù)設(shè)或設(shè)定的炸彈總數(shù)，用于后續(xù)判斷是否勝利使用
  this.surplusMine = 0; //剩余雷數(shù)
  this.mineInfo = []; //用于接收隨機(jī)生成的雷的信息
  this.tdsArr = [] //存放單元格的信息
  this.isPlay = false; //是否開(kāi)始玩
  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ū)域，在玩家第一次點(diǎn)擊游戲區(qū)域的時(shí)候執(zhí)行
  this.table.oncontextmenu = function() { return false }; //清除默認(rèn)右鍵單機(jī)事件
  for (var i = 0; i < this.gameBox.children.length; i++) { //為防止重新開(kāi)始游戲時(shí)，重復(fù)生成多個(gè)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] = []; //為每一行生成一個(gè)數(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", //格子類型，用于判斷是否時(shí)炸彈
     x: i, //行
     y: j, //列
     value: 0, //當(dāng)該格子周圍有炸彈時(shí)顯示該數(shù)值，生成炸彈的時(shí)候會(huì)++
     isOpen: false, //判斷該單元格是否被打開(kāi)
     isFlag: false //判斷是否有標(biāo)記flag
    }
   }
   this.table.appendChild(tr); //見(jiàn)tr插入到table中
  }
  this.gameBox.appendChild(this.table);
 }

 Game.prototype.creatMine = function(event, target) { //生成炸彈，該方法會(huì)在用戶第一次點(diǎn)擊棋盤的時(shí)候執(zhí)行一次

  var This = this;
  for (var i = 0; true; i++) { //隨機(jī)生成炸彈，生成扎當(dāng)數(shù)與設(shè)定扎當(dāng)書mineNum相同時(shí)終止循環(huán)
   var randomX = Math.floor(Math.random() * this.tr), //隨機(jī)生成炸彈的行數(shù)
    randomY = Math.floor(Math.random() * this.td); //隨機(jī)生成炸彈的列數(shù)
   // console.log(randomX + " " + randomY)
   if (target.info.x != randomX || target.info.y != randomY) { //保證第一次點(diǎn)擊的時(shí)候不是炸彈
    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;
    }
   }
  }

  //為每個(gè)炸彈周圍的方格添加數(shù)字
  for (var i = 0; i < this.mineInfo.length; i++) {
   var around = this.getAround(this.mineInfo[i], This); //獲取每個(gè)炸彈的周圍方格
   // console.log(this.getAround(this.mineInfo[i], This))

   for (var j = 0; j < around.length; j++) { //將周圍每個(gè)方格的value++
    around[j].info.value += 1;
   }
  }


 }

 Game.prototype.getAround = function(thisCell, This) { //獲取某個(gè)方格的周圍非炸彈方格，需要傳遞一個(gè)單元格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不能為負(fù)數(shù)，且不能超過(guò)設(shè)定的行數(shù)和列數(shù)
     j < 0 ||
     k < 0 ||
     j > (This.tr - 1) ||
     k > (This.td - 1) ||
     //同時(shí)跳過(guò)自身和周邊是雷的方格
     This.tdsArr[j][k].info.type == "mine" ||
     (j == x && k == y)

    ) {
     continue; //滿足上述條件是則跳過(guò)當(dāng)此循環(huán)；
    } else {
     result.push(This.tdsArr[j][k]) //將符合的單元格push到result中返回
    }
   }
  }
  return result;
 }

 Game.prototype.lifeMouse = function(event, target) { //左鍵點(diǎn)擊事件
  var This = this; //用變量的方式將Game的this傳遞到函數(shù)中
  var noOpen = 0; //沒(méi)有被打開(kāi)的格子數(shù)量
  if (!target.info.isFlag) { //表示該必須沒(méi)有被右鍵標(biāo)記才能鼠標(biāo)左擊
   if (target.info.type == "number") { //是數(shù)字時(shí),則可視化

    function getAllZero(target, This) { //遞歸函數(shù)
     // console.log(target.info)
     if (target.info.isFlag) { //當(dāng)這個(gè)單元格之前有被標(biāo)記過(guò)flag時(shí)，則將剩余炸彈數(shù)+1
      This.surplusMine += 1;
      target.info.isFlag = false; //單元格被打開(kāi)后初始化flag
     }
     if (target.info.value == 0) { //等于格子的value等于0的時(shí)候

      target.className = This.openClass[target.info.value]; //可視化

      target.info.isOpen = true; //表示該單元格被打開(kāi)

      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時(shí)不執(zhí)行

        getAllZero(thisAround[i], This) //執(zhí)行遞歸
       }

      }

     } else {
      target.innerHTML = target.info.value;
      target.className = This.openClass[target.info.value]; //可視化
      target.info.isOpen = true; //表示單元格被打開(kāi)
      target.info.isFlag = false; //單元格被打開(kāi)后初始化flag

     }
    }

    getAllZero(target, This); //首次執(zhí)行

    //每次鼠標(biāo)左鍵點(diǎn)擊的時(shí)候都需要檢查一下沒(méi)有被打開(kāi)的方格數(shù)量，每有一個(gè)則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ù)量相同時(shí)，說(shuō)明剩余的方格全是雷，游戲通過(guò)
    if (noOpen == this.mineNum) {
     console.log(noOpen)
     this.gameWin();
    }

   } else { //點(diǎn)擊到了炸彈，游戲結(jié)束
    this.gameOver(target)
   }
  }



 }

 Game.prototype.rightMouse = function(target) { //鼠標(biāo)右鍵點(diǎn)擊執(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)記一個(gè)方格，剩余炸彈數(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時(shí)，遍歷所有單元格
    // 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) { //檢查每個(gè)雷的isFlag屬性是否被標(biāo)記，只要有一個(gè)為false則輸?shù)粲螒?
      isWin = false;
      this.gameOver(target, 1);
      break;
     }
    }
    isWin ? this.gameWin(1) : 0; //三目運(yùn)算符號(hào)
   }


   // if (this.surplusMine == 0) { //標(biāo)記完所有flag時(shí)，遍歷所有單元格
   //  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)旗用完了時(shí)為1，點(diǎn)擊到炸彈為0
  // console.log(this.mineInfo)
  var mineInfoLen = this.mineInfo.length;
  for (var i = 0; i < mineInfoLen; i++) { //顯示每個(gè)雷的位置
   this.mineInfo[i].className = "mine";
  }
  this.table.onmousedown = false; //取消鼠標(biāo)事件

  if (code) {
   alert("旗幟用完了，沒(méi)有排除所有雷，游戲結(jié)束")
  } else {
   target.className = "targetMine"; //觸發(fā)雷標(biāo)紅色
   alert("你被炸彈炸死了，游戲結(jié)束")
  }

 }

 Game.prototype.gameWin = function(code) { //游戲勝利
  if (code) {
   alert("你成功標(biāo)記所有地雷，游戲通過(guò)")
  } else {
   alert("你找到了所有安全區(qū)域，游戲通過(guò)")
  }
  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) { //首次點(diǎn)擊初始化棋盤，隨機(jī)生成炸彈
    this.isPlay = true;
    This.creatMine(event, target);
   }

   if (event.button == 0) { //鼠標(biāo)左鍵點(diǎn)擊時(shí)執(zhí)行
    This.lifeMouse(event, target);

   } else if (event.button == 2) { //右鍵點(diǎn)擊執(zhí)行
    This.rightMouse(target)
   }
   This.footerNum.innerHTML = This.surplusMine; //每次點(diǎn)擊右鍵，刷新頁(yè)面下方的剩余雷數(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() { //簡(jiǎn)單
   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();
  });


 }

 // 默認(rèn)棋盤
 var game = new Game(10, 10, 10);
 game.creatDom();
 game.play();
 game.tablePos();
 game.setDegree()

總結(jié)一下，該游戲個(gè)人覺(jué)得難點(diǎn)有4個(gè)：