本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码,供大家参考,具体内容如下

先说大体思路,下面放代码

思路:

1产生指定数量的地雷
2计算方块周围的地雷
3点击地雷结束
4点击地雷周边显示地雷个数
5点击空白块,消除所有相连的空白块
6游戏主体已经完成了。剩下就是完善一些小细节,例如胜利判断 ,失败露出苦瓜脸 ,难度切换,新游戏按钮 等等…

首先是html+css的代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>扫雷v1.0</title>

  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial;
      font-size: 12px;
      color: #FFFFFF;
      background: #000000;
    }

    .div-game {
      margin: 5% auto;
      width: 480px;
      height: 420px;
    }

    .div-score {
      position: relative;
      top: 0px;
      left: 0px;
      height: 30px;
      color: #000000;
      background: #C0C0C0;
      border-top: 1px solid #FFFFFF;
      border-right: 1px solid #FFFFFF;
    }

    .img-mines,
    .div-mines,
    .img-time,
    .img-smiley,
    .div-time,
    .lb-level,
    .bn-reset {
      position: absolute;
    }

    .img-mines {
      top: 6px;
      left: 10px;
    }

    .div-mines {
      top: 6px;
      left: 30px;
      width: 40px;
      font-family: Verdana;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
      color: #0000CF;
      background: transparent;
    }

    .img-time {
      top: 6px;
      left: 80px;
    }

    .div-time {
      top: 6px;
      left: 100px;
      width: 60px;
      font-family: Verdana;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
      color: #007F00;
      background: transparent;
    }

    .img-smiley {
      top: 6px;
      left: 240px;
    }

    .lb-level {
      top: 4px;
      left: 330px;
      width: 80px;
      font-family: Arial;
      font-size: 12px;
    }

    .bn-reset {
      top: 3px;
      left: 420px;
      width: 50px;
      font-family: Arial;
      font-size: 12px;
      text-align: center;
    }

    .div-board {
      position: relative;
      width: 480px;
      height: 320px;
      color: #000000;
      background: #7F7F7F;
      border-top: 1px solid #000000;
      border-bottom: 1px solid #FFFFFF;
      border-left: 1px solid #FFFFFF;
    }

    .cell {
      position: absolute;
      overflow: hidden;
    }

    .div-adsense {
      position: relative;
      width: 100%;
      height: 60px;
      text-align: center;
    }

    .div-addfreestats {
      position: absolute;
      left: 0px;
      top: 0px;
      display: none;
    }
  </style>
</head>

<body>
  <div id="div-game" class="div-game">
    <div id="div-score" class="div-score">
      <img id="img-mines" class="img-mines" src="https://www.atool.online/article/img/mines.png">
      <div id="div-mines" class="div-mines">10</div>
      <img id="img-time" class="img-time" src="https://www.atool.online/article/img/clock.png">
      <div id="div-time" class="div-time">00:00</div>
      <img id="img-smiley" class="img-smiley" src="https://www.atool.online/article/img/happy.png" style="visibility: hidden;">
      <select id="lb-level" class="lb-level" onchange="game.restart()" name="bn-reset">
        <option selected="" value="easy">简单</option>
        <option value="normal">普通</option>
        <option value="advanced">高级</option>
        <option value="expert">专家</option>
        <option value="hell">地狱</option>
      </select>
      <input id="bn-reset" type="button" class="bn-reset"  value="新游戏!" name="bn-reset">
    </div>
    <div id="div-board" class="div-board">
        <img id="cell0" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 175px;" anum="0">
        <img id="cell1" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 190px;" anum="0">
        <img id="cell2" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 205px;" anum="0">
        <img id="cell3" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 220px;" anum="0">
        <img id="cell4" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 235px;" anum="0">
        <img id="cell5" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 250px;" anum="0">
        <img id="cell6" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 265px;" anum="0">
        <img id="cell7" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 280px;" anum="0">
        <img id="cell8" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 295px;" anum="0">
        <img id="cell9" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 90px; left: 310px;" anum="0">
        <img id="cell10" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 175px;" anum="0">
        <img id="cell11" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 190px;" anum="0">
        <img id="cell12" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 205px;" anum="0">
        <img id="cell13" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 220px;" anum="0">
        <img id="cell14" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 235px;" anum="0">
        <img id="cell15" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 250px;" anum="0">
        <img id="cell16" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 265px;" anum="0">
        <img id="cell17" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 280px;" anum="0">
        <img id="cell18" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 295px;" anum="0">
        <img id="cell19" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 105px; left: 310px;" anum="0">
        <img id="cell20" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 175px;" anum="0">
        <img id="cell21" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 190px;" anum="0">
        <img id="cell22" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 205px;" anum="0">
        <img id="cell23" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 220px;" anum="0">
        <img id="cell24" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 235px;" anum="0">
        <img id="cell25" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 250px;" anum="0">
        <img id="cell26" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 265px;" anum="0">
        <img id="cell27" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 280px;" anum="0">
        <img id="cell28" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 295px;" anum="0">
        <img id="cell29" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 120px; left: 310px;" anum="0">
        <img id="cell30" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 175px;" anum="0">
        <img id="cell31" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 190px;" anum="0">
        <img id="cell32" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 205px;" anum="0">
        <img id="cell33" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 220px;" anum="0">
        <img id="cell34" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 235px;" anum="0">
        <img id="cell35" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 250px;" anum="0">
        <img id="cell36" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 265px;" anum="0">
        <img id="cell37" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 280px;" anum="0">
        <img id="cell38" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 295px;" anum="0">
        <img id="cell39" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 135px; left: 310px;" anum="0">
        <img id="cell40" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 175px;" anum="0">
        <img id="cell41" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 190px;" anum="0">
        <img id="cell42" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 205px;" anum="0">
        <img id="cell43" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 220px;" anum="0">
        <img id="cell44" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 235px;" anum="0">
        <img id="cell45" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 250px;" anum="0">
        <img id="cell46" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 265px;" anum="0">
        <img id="cell47" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 280px;" anum="0">
        <img id="cell48" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 295px;" anum="0">
        <img id="cell49" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 150px; left: 310px;" anum="0">
        <img id="cell50" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 175px;" anum="0">
        <img id="cell51" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 190px;" anum="0">
        <img id="cell52" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 205px;" anum="0">
        <img id="cell53" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 220px;" anum="0">
        <img id="cell54" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 235px;" anum="0">
        <img id="cell55" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 250px;" anum="0">
        <img id="cell56" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 265px;" anum="0">
        <img id="cell57" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 280px;" anum="0">
        <img id="cell58" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 295px;" anum="0">
        <img id="cell59" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 165px; left: 310px;" anum="0">
        <img id="cell60" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 175px;" anum="0">
        <img id="cell61" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 190px;" anum="0">
        <img id="cell62" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 205px;" anum="0">
        <img id="cell63" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 220px;" anum="0">
        <img id="cell64" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 235px;" anum="0">
        <img id="cell65" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 250px;" anum="0">
        <img id="cell66" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 265px;" anum="0">
        <img id="cell67" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 280px;" anum="0">
        <img id="cell68" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 295px;" anum="0">
        <img id="cell69" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 180px; left: 310px;" anum="0">
        <img id="cell70" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 175px;" anum="0">
        <img id="cell71" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 190px;" anum="0">
        <img id="cell72" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 205px;" anum="0">
        <img id="cell73" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 220px;" anum="0">
        <img id="cell74" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 235px;" anum="0">
        <img id="cell75" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 250px;" anum="0">
        <img id="cell76" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 265px;" anum="0">
        <img id="cell77" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 280px;" anum="0">
        <img id="cell78" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 295px;" anum="0">
        <img id="cell79" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 195px; left: 310px;" anum="0">
        <img id="cell80" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 175px;" anum="0">
        <img id="cell81" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 190px;" anum="0">
        <img id="cell82" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 205px;" anum="0">
        <img id="cell83" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 220px;" anum="0">
        <img id="cell84" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 235px;" anum="0">
        <img id="cell85" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 250px;" anum="0">
        <img id="cell86" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 265px;" anum="0">
        <img id="cell87" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 280px;" anum="0">
        <img id="cell88" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 295px;" anum="0">
        <img id="cell89" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 210px; left: 310px;" anum="0">
        <img id="cell90" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 175px;" anum="0">
        <img id="cell91" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 190px;" anum="0">
        <img id="cell92" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 205px;" anum="0">
        <img id="cell93" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 220px;" anum="0">
        <img id="cell94" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 235px;" anum="0">
        <img id="cell95" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 250px;" anum="0">
        <img id="cell96" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 265px;" anum="0">
        <img id="cell97" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 280px;" anum="0">
        <img id="cell98" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 295px;" anum="0">
        <img id="cell99" class="cell" src="https://www.atool.online/article/img/up.png" style="width: 16px; height: 16px; top: 225px; left: 310px;" anum="0">
      </div>
  <p>欢迎来到扫雷游戏!<br />在最短的时间内根据点击格子出现的数字找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输。加油!<br />(简单难度:10个地雷;普通难度:20个地雷;高级难度:30个地雷;专家难度:40个地雷;地狱难度:50个地雷)</p>
</div>
  <div style="display:none;"></div>
  <script src="https://www.atool.online/article/game - 副本.js"></script>
</body>

</html>

然后是JavaScript的代码:

let select = document.querySelector('#lb-level')
let boomNum = 10
if (select.options[select.selectedIndex].value == "easy") {
    boomNum = 10
    game()
}
select.onchange = function () {
    refresh()
    if (select.options[select.selectedIndex].value == "easy") {
        boomNum = 10
        game()
    } else if (select.options[select.selectedIndex].value == "normal") {
        boomNum = 20
        game()
    } else if (select.options[select.selectedIndex].value == "advanced") {
        boomNum = 30
        game()
    } else if (select.options[select.selectedIndex].value == "expert") {
        boomNum = 40
        game()
    } else if (select.options[select.selectedIndex].value == "hell") {
        boomNum = 50
        game()
    }
}

function refresh() {
    //清除掉所有的雷标签、图片复原、点击事件清空、计数器变0,win变0,计数器重开
    let boxss = document.querySelectorAll('#div-board>img')
    for (let i = 0; i < boxss.length; i++) {
        boxss[i].className = 'cell'
        boxss[i].setAttribute('anum', 0)
        boxss[i].onclick = null
        boxss[i].src = 'https://www.atool.online/article/img/up.png'
    }
    win = 0
    clearInterval(timer)
    document.querySelector('#div-time').innerText = '00:00'
    ta = 0
    tb = 0
    ta1 = ''
    tb1 = ''
    timer = setInterval(() => {
        ta++
        if (ta == 60) {
            ta = 0
            tb++
        }
        ta > 9 ? ta1 = ta : ta1 = '0' + ta
        tb > 9 ? tb1 = tb : tb1 = '0' + tb
        document.querySelector('#div-time').innerText = tb1 + ':' + ta1
    }, 1000);
    return
}

function game() {
    document.querySelector('#div-mines').innerText = boomNum
    boomNum
    console.log(123);
    // 找到元素
    let boxs = document.querySelectorAll('#div-board>img')
    let win = 0     //胜利条件
    // temp1函数,生成一批随机数
    function temp1(total, size) {
        // 2个数组,第1个是临时的大数组,第2个是最终数组
        let temp = []
        let final = []
        // 先按照总数量生成大数组
        for (let i = 0; i < total; i++) {
            temp[i] = i
        }
        // 把大数组打乱
        for (let i = 0; i < total; i++) {
            // 产生2个随机数,让他们交换,只要他们不相等
            let tempNum1 = parseInt(Math.random() * total)
            let tempNum2 = parseInt(Math.random() * total)
            let tempTemp = 0
            if (tempNum1 != tempNum2) {
                tempTemp = temp[tempNum1]
                temp[tempNum1] = temp[tempNum2]
                temp[tempNum2] = tempTemp
            }
        }
        // 取出前面的那些数,给新数组
        for (let i = 0; i < size; i++) {
            final[i] = temp[i]
        }
        return final
    }
    let temps = temp1(100, boomNum)
    // 把boom 这个标志,加给这批下标。
    for (let i = 0; i < boomNum; i++) {
        boxs[temps[i]].classList.add('boom')
    }
    let booms = document.querySelectorAll('.boom')  //所有的雷拉个队
    // 判断每格周围的雷数
    for (let i = 0; i < boxs.length; i++) {


        //先判断自己是不是雷吧,如果自己是雷,终止这次循环(因为不用计算了)
        if (boxs[i].classList.contains('boom')) {
            continue
        }
        //开始判断雷数
        // 左边是  下标-1   右边是  下标+1   上面是 下标-10  下面是 下标+10
        // 左上是  下标-11  右上是  下标-9   左下是  下标+9  右下是 下标+11
        // 需要判断是否为左右,左右的特点,id以0,9结尾,所有的左右 不需要判断左系列和右系列
        if (i >= 11 && boxs[i].id.charAt(boxs[i].id.length - 1) != '0' && boxs[i - 11].classList.contains('boom')) {   //左上
            boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1)
        }
        if (i >= 10 && boxs[i - 10].classList.contains('boom')) {   //上
            boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1)
        }
        if (i >= 9 && boxs[i].id.charAt(boxs[i].id.length - 1) != '9' && boxs[i - 9].classList.contains('boom')) {     //右上
            boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1)
        }
        if (i >= 1 && boxs[i].id.charAt(boxs[i].id.length - 1) != '0' && boxs[i - 1].classList.contains('boom')) {     //左
            boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1)
        }
        if (i <= 98 && boxs[i].id.charAt(boxs[i].id.length - 1) != '9' && boxs[i + 1].classList.contains('boom')) {    //右
            boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1)
        }
        if (i <= 90 && boxs[i].id.charAt(boxs[i].id.length - 1) != '0' && boxs[i + 9].classList.contains('boom')) {    //左下
            boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1)
        }
        if (i <= 89 && boxs[i + 10].classList.contains('boom')) {   //下
            boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1)
        }
        if (i <= 88 && boxs[i].id.charAt(boxs[i].id.length - 1) != '9' && boxs[i + 11].classList.contains('boom')) {   //右下
            boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1)
        }
    }

    // 点击事件(核心玩法)
    for (let i = 0; i < boxs.length; i++) {
        boxs[i].onclick = function () {
            // 点击之后,那么就有3种情况。1,这是雷。2,这下面有数字。3.这下面是空的
            if (boxs[i].classList.contains('boom')) {
                // 失败,1其他的雷,变成普通雷。2.被点击的那个按钮,变成爆炸雷,3取消所有的点击事件  4.计时器关闭  5.苦瓜脸
                for (let j = 0; j < booms.length; j++) {
                    booms[j].src = 'https://www.atool.online/article/img/mine.png'
                }
                boxs[i].src = 'https://www.atool.online/article/img/boom.png'
                for (let x = 0; x < boxs.length; x++) {
                    boxs[x].onclick = null
                }
                clearInterval(timer)
                document.querySelector('#img-smiley').style.visibility = 'visible'
                document.querySelector('#img-smiley').src = 'https://www.atool.online/article/img/sad.png'
            } else if (boxs[i].getAttribute('anum') != '0') {
                //不是0,那么显示数字,然后关闭点击事件,并且计时+1
                boxs[i].src = 'https://www.atool.online/article/img/' + boxs[i].getAttribute('anum') + '.png'
                win++
                boxs[i].onclick = null
            } else {
                // 既然判断不等于0通不过,那就一定等于0了。消除所有相连的空白块。不存在的下标可以作为判断条件吗?先当可以来写
                boxs[i].src = 'https://www.atool.online/article/img/0.png'
                win++
                boxs[i].onclick = null
                if (i >= 10) {    //上,需要判断是不是第一排,如果不是第一排就Ok
                    boxs[i - 10].click()
                }
                if (i >= 1 && boxs[i].id.charAt(boxs[i].id.length - 1) != '0') {     //左,需要判断是不是在左边,在左边就不用了
                    boxs[i - 1].click()
                }
                if (i <= 98 && boxs[i].id.charAt(boxs[i].id.length - 1) != '9') {    //右,需要判断是不是在右边,在右边就不用了
                    boxs[i + 1].click()
                }
                if (i <= 89) {    //下
                    boxs[i + 10].click()
                }
            }
            if (win == 90) {
                // 胜利,游戏结束,1所有的雷,变成红旗,2取消所有的点击事件  3.计时器关闭
                for (let j = 0; j < booms.length; j++) {
                    booms[j].src = 'https://www.atool.online/article/img/flag.png'
                }
                for (let x = 0; x < boxs.length; x++) {
                    boxs[x].onclick = null
                }
                clearInterval(timer)
                document.querySelector('#img-smiley').style.visibility = 'visible'
            }
        }
    }
}

//按钮事件
document.querySelector('#bn-reset').onclick = function () {
    refresh()
    if (select.options[select.selectedIndex].value == "easy") {
        boomNum = 10
        game()
    } else if (select.options[select.selectedIndex].value == "normal") {
        boomNum = 20
        game()
    } else if (select.options[select.selectedIndex].value == "advanced") {
        boomNum = 30
        game()
    } else if (select.options[select.selectedIndex].value == "expert") {
        boomNum = 40
        game()
    } else if (select.options[select.selectedIndex].value == "hell") {
        boomNum = 50
        game()
    }
}
// 计时器
let ta = 0
let tb = 0
let ta1 = ''
let tb1 = ''
let timer = setInterval(() => {
    ta++
    if (ta == 60) {
        ta = 0
        tb++
    }
    ta > 9 ? ta1 = ta : ta1 = '0' + ta
    tb > 9 ? tb1 = tb : tb1 = '0' + tb
    document.querySelector('#div-time').innerText = tb1 + ':' + ta1
}, 1000);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部