JavaScript實(shí)現(xiàn)掃雷小游戲
更新時(shí)間：2022年06月08日 11:23:06 作者：ahaohaoo
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)掃雷小游戲的具體代碼，供大家參考，具體內(nèi)容如下
先說(shuō)大體思路，下面放代碼
思路：
1產(chǎn)生指定數(shù)量的地雷
2計(jì)算方塊周?chē)牡乩?br />3點(diǎn)擊地雷結(jié)束
4點(diǎn)擊地雷周邊顯示地雷個(gè)數(shù)
5點(diǎn)擊空白塊，消除所有相連的空白塊
6游戲主體已經(jīng)完成了。剩下就是完善一些小細(xì)節(jié)，例如勝利判斷 ，失敗露出苦瓜臉 ，難度切換，新游戲按鈕 等等…
首先是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="./img/mines.png">
? ? ? <div id="div-mines" class="div-mines">10</div>
? ? ? <img id="img-time" class="img-time" src="./img/clock.png">
? ? ? <div id="div-time" class="div-time">00:00</div>
? ? ? <img id="img-smiley" class="img-smiley" src="./img/happy.png" style="visibility: hidden;">
? ? ? <select id="lb-level" class="lb-level" onchange="game.restart()" name="bn-reset">
? ? ? ? <option selected="" value="easy">簡(jiǎn)單</option>
? ? ? ? <option value="normal">普通</option>
? ? ? ? <option value="advanced">高級(jí)</option>
? ? ? ? <option value="expert">專(zhuān)家</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="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 175px;" anum="0">
? ? ? ? <img id="cell1" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 190px;" anum="0">
? ? ? ? <img id="cell2" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 205px;" anum="0">
? ? ? ? <img id="cell3" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 220px;" anum="0">
? ? ? ? <img id="cell4" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 235px;" anum="0">
? ? ? ? <img id="cell5" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 250px;" anum="0">
? ? ? ? <img id="cell6" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 265px;" anum="0">
? ? ? ? <img id="cell7" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 280px;" anum="0">
? ? ? ? <img id="cell8" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 295px;" anum="0">
? ? ? ? <img id="cell9" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 90px; left: 310px;" anum="0">
? ? ? ? <img id="cell10" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 175px;" anum="0">
? ? ? ? <img id="cell11" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 190px;" anum="0">
? ? ? ? <img id="cell12" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 205px;" anum="0">
? ? ? ? <img id="cell13" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 220px;" anum="0">
? ? ? ? <img id="cell14" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 235px;" anum="0">
? ? ? ? <img id="cell15" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 250px;" anum="0">
? ? ? ? <img id="cell16" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 265px;" anum="0">
? ? ? ? <img id="cell17" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 280px;" anum="0">
? ? ? ? <img id="cell18" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 295px;" anum="0">
? ? ? ? <img id="cell19" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 105px; left: 310px;" anum="0">
? ? ? ? <img id="cell20" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 175px;" anum="0">
? ? ? ? <img id="cell21" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 190px;" anum="0">
? ? ? ? <img id="cell22" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 205px;" anum="0">
? ? ? ? <img id="cell23" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 220px;" anum="0">
? ? ? ? <img id="cell24" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 235px;" anum="0">
? ? ? ? <img id="cell25" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 250px;" anum="0">
? ? ? ? <img id="cell26" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 265px;" anum="0">
? ? ? ? <img id="cell27" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 280px;" anum="0">
? ? ? ? <img id="cell28" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 295px;" anum="0">
? ? ? ? <img id="cell29" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 120px; left: 310px;" anum="0">
? ? ? ? <img id="cell30" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 175px;" anum="0">
? ? ? ? <img id="cell31" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 190px;" anum="0">
? ? ? ? <img id="cell32" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 205px;" anum="0">
? ? ? ? <img id="cell33" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 220px;" anum="0">
? ? ? ? <img id="cell34" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 235px;" anum="0">
? ? ? ? <img id="cell35" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 250px;" anum="0">
? ? ? ? <img id="cell36" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 265px;" anum="0">
? ? ? ? <img id="cell37" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 280px;" anum="0">
? ? ? ? <img id="cell38" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 295px;" anum="0">
? ? ? ? <img id="cell39" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 135px; left: 310px;" anum="0">
? ? ? ? <img id="cell40" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 175px;" anum="0">
? ? ? ? <img id="cell41" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 190px;" anum="0">
? ? ? ? <img id="cell42" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 205px;" anum="0">
? ? ? ? <img id="cell43" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 220px;" anum="0">
? ? ? ? <img id="cell44" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 235px;" anum="0">
? ? ? ? <img id="cell45" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 250px;" anum="0">
? ? ? ? <img id="cell46" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 265px;" anum="0">
? ? ? ? <img id="cell47" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 280px;" anum="0">
? ? ? ? <img id="cell48" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 295px;" anum="0">
? ? ? ? <img id="cell49" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 150px; left: 310px;" anum="0">
? ? ? ? <img id="cell50" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 175px;" anum="0">
? ? ? ? <img id="cell51" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 190px;" anum="0">
? ? ? ? <img id="cell52" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 205px;" anum="0">
? ? ? ? <img id="cell53" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 220px;" anum="0">
? ? ? ? <img id="cell54" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 235px;" anum="0">
? ? ? ? <img id="cell55" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 250px;" anum="0">
? ? ? ? <img id="cell56" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 265px;" anum="0">
? ? ? ? <img id="cell57" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 280px;" anum="0">
? ? ? ? <img id="cell58" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 295px;" anum="0">
? ? ? ? <img id="cell59" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 165px; left: 310px;" anum="0">
? ? ? ? <img id="cell60" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 175px;" anum="0">
? ? ? ? <img id="cell61" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 190px;" anum="0">
? ? ? ? <img id="cell62" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 205px;" anum="0">
? ? ? ? <img id="cell63" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 220px;" anum="0">
? ? ? ? <img id="cell64" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 235px;" anum="0">
? ? ? ? <img id="cell65" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 250px;" anum="0">
? ? ? ? <img id="cell66" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 265px;" anum="0">
? ? ? ? <img id="cell67" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 280px;" anum="0">
? ? ? ? <img id="cell68" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 295px;" anum="0">
? ? ? ? <img id="cell69" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 180px; left: 310px;" anum="0">
? ? ? ? <img id="cell70" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 175px;" anum="0">
? ? ? ? <img id="cell71" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 190px;" anum="0">
? ? ? ? <img id="cell72" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 205px;" anum="0">
? ? ? ? <img id="cell73" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 220px;" anum="0">
? ? ? ? <img id="cell74" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 235px;" anum="0">
? ? ? ? <img id="cell75" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 250px;" anum="0">
? ? ? ? <img id="cell76" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 265px;" anum="0">
? ? ? ? <img id="cell77" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 280px;" anum="0">
? ? ? ? <img id="cell78" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 295px;" anum="0">
? ? ? ? <img id="cell79" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 195px; left: 310px;" anum="0">
? ? ? ? <img id="cell80" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 175px;" anum="0">
? ? ? ? <img id="cell81" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 190px;" anum="0">
? ? ? ? <img id="cell82" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 205px;" anum="0">
? ? ? ? <img id="cell83" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 220px;" anum="0">
? ? ? ? <img id="cell84" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 235px;" anum="0">
? ? ? ? <img id="cell85" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 250px;" anum="0">
? ? ? ? <img id="cell86" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 265px;" anum="0">
? ? ? ? <img id="cell87" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 280px;" anum="0">
? ? ? ? <img id="cell88" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 295px;" anum="0">
? ? ? ? <img id="cell89" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 210px; left: 310px;" anum="0">
? ? ? ? <img id="cell90" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 175px;" anum="0">
? ? ? ? <img id="cell91" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 190px;" anum="0">
? ? ? ? <img id="cell92" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 205px;" anum="0">
? ? ? ? <img id="cell93" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 220px;" anum="0">
? ? ? ? <img id="cell94" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 235px;" anum="0">
? ? ? ? <img id="cell95" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 250px;" anum="0">
? ? ? ? <img id="cell96" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 265px;" anum="0">
? ? ? ? <img id="cell97" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 280px;" anum="0">
? ? ? ? <img id="cell98" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 295px;" anum="0">
? ? ? ? <img id="cell99" class="cell" src="./img/up.png" style="width: 16px; height: 16px; top: 225px; left: 310px;" anum="0">
? ? ? </div>
? <p>歡迎來(lái)到掃雷游戲！<br />在最短的時(shí)間內(nèi)根據(jù)點(diǎn)擊格子出現(xiàn)的數(shù)字找出所有非雷格子，同時(shí)避免踩雷，踩到一個(gè)雷即全盤(pán)皆輸。加油！<br />(簡(jiǎn)單難度：10個(gè)地雷；普通難度：20個(gè)地雷；高級(jí)難度：30個(gè)地雷；專(zhuān)家難度：40個(gè)地雷；地獄難度：50個(gè)地雷)</p>
</div>
? <div style="display:none;"></div>
? <script src="./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() {
? ? //清除掉所有的雷標(biāo)簽、圖片復(fù)原、點(diǎn)擊事件清空、計(jì)數(shù)器變0,win變0，計(jì)數(shù)器重開(kāi)
? ? 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 = './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函數(shù)，生成一批隨機(jī)數(shù)
? ? function temp1(total, size) {
? ? ? ? // 2個(gè)數(shù)組，第1個(gè)是臨時(shí)的大數(shù)組，第2個(gè)是最終數(shù)組
? ? ? ? let temp = []
? ? ? ? let final = []
? ? ? ? // 先按照總數(shù)量生成大數(shù)組
? ? ? ? for (let i = 0; i < total; i++) {
? ? ? ? ? ? temp[i] = i
? ? ? ? }
? ? ? ? // 把大數(shù)組打亂
? ? ? ? for (let i = 0; i < total; i++) {
? ? ? ? ? ? // 產(chǎn)生2個(gè)隨機(jī)數(shù)，讓他們交換,只要他們不相等
? ? ? ? ? ? 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
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 取出前面的那些數(shù)，給新數(shù)組
? ? ? ? for (let i = 0; i < size; i++) {
? ? ? ? ? ? final[i] = temp[i]
? ? ? ? }
? ? ? ? return final
? ? }
? ? let temps = temp1(100, boomNum)
? ? // 把boom 這個(gè)標(biāo)志，加給這批下標(biāo)。
? ? for (let i = 0; i < boomNum; i++) {
? ? ? ? boxs[temps[i]].classList.add('boom')
? ? }
? ? let booms = document.querySelectorAll('.boom') ?//所有的雷拉個(gè)隊(duì)
? ? // 判斷每格周?chē)睦讛?shù)
? ? for (let i = 0; i < boxs.length; i++) {
? ? ? ? //先判斷自己是不是雷吧，如果自己是雷，終止這次循環(huán)（因?yàn)椴挥糜?jì)算了）
? ? ? ? if (boxs[i].classList.contains('boom')) {
? ? ? ? ? ? continue
? ? ? ? }
? ? ? ? //開(kāi)始判斷雷數(shù)
? ? ? ? // 左邊是 ?下標(biāo)-1 ? 右邊是 ?下標(biāo)+1 ? 上面是 下標(biāo)-10 ?下面是 下標(biāo)+10
? ? ? ? // 左上是 ?下標(biāo)-11 ?右上是 ?下標(biāo)-9 ? 左下是 ?下標(biāo)+9 ?右下是 下標(biāo)+11
? ? ? ? // 需要判斷是否為左右，左右的特點(diǎn)，id以0，9結(jié)尾，所有的左右 不需要判斷左系列和右系列
? ? ? ? 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)
? ? ? ? }
? ? }
? ? // 點(diǎn)擊事件（核心玩法）
? ? for (let i = 0; i < boxs.length; i++) {
? ? ? ? boxs[i].onclick = function () {
? ? ? ? ? ? // 點(diǎn)擊之后，那么就有3種情況。1，這是雷。2，這下面有數(shù)字。3.這下面是空的
? ? ? ? ? ? if (boxs[i].classList.contains('boom')) {
? ? ? ? ? ? ? ? // 失敗，1其他的雷，變成普通雷。2.被點(diǎn)擊的那個(gè)按鈕，變成爆炸雷，3取消所有的點(diǎn)擊事件 ?4.計(jì)時(shí)器關(guān)閉 ?5.苦瓜臉
? ? ? ? ? ? ? ? for (let j = 0; j < booms.length; j++) {
? ? ? ? ? ? ? ? ? ? booms[j].src = './img/mine.png'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? boxs[i].src = './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 = './img/sad.png'
? ? ? ? ? ? } else if (boxs[i].getAttribute('anum') != '0') {
? ? ? ? ? ? ? ? //不是0，那么顯示數(shù)字，然后關(guān)閉點(diǎn)擊事件，并且計(jì)時(shí)+1
? ? ? ? ? ? ? ? boxs[i].src = './img/' + boxs[i].getAttribute('anum') + '.png'
? ? ? ? ? ? ? ? win++
? ? ? ? ? ? ? ? boxs[i].onclick = null
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? // 既然判斷不等于0通不過(guò)，那就一定等于0了。消除所有相連的空白塊。不存在的下標(biāo)可以作為判斷條件嗎？先當(dāng)可以來(lái)寫(xiě)
? ? ? ? ? ? ? ? boxs[i].src = './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) {
? ? ? ? ? ? ? ? // 勝利，游戲結(jié)束，1所有的雷，變成紅旗，2取消所有的點(diǎn)擊事件 ?3.計(jì)時(shí)器關(guān)閉
? ? ? ? ? ? ? ? for (let j = 0; j < booms.length; j++) {
? ? ? ? ? ? ? ? ? ? booms[j].src = './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()
? ? }
}
// 計(jì)時(shí)器
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);以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Electron 電源狀態(tài)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
jquery實(shí)現(xiàn)的圖片點(diǎn)擊滾動(dòng)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的圖片點(diǎn)擊滾動(dòng)效果,需要的朋友可以參考下2014-04-04
學(xué)習(xí)Bootstrap滾動(dòng)監(jiān)聽(tīng) 附調(diào)用方法
這篇文章主要為大家全面解析Bootstrap中滾動(dòng)監(jiān)聽(tīng)的使用方法，感興趣的小伙伴們可以參考一下2016-07-07
js輸入框郵箱自動(dòng)提示功能代碼實(shí)現(xiàn)
一個(gè)輸入框當(dāng)我輸入任何字的時(shí)候自動(dòng)下拉相應(yīng)的郵箱提示，在輸入框輸入11的時(shí)候下拉框有所有11的郵箱 輸入其他的時(shí)候 有其他文案對(duì)應(yīng)的郵箱,下面實(shí)現(xiàn)這個(gè)自動(dòng)提示功能2013-12-12
javascript實(shí)現(xiàn)商品圖片放大鏡
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)商品圖片放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了javascript定時(shí)器完整實(shí)現(xiàn)方法,以實(shí)例形式分析了定時(shí)器的嵌套調(diào)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果
這篇文章給大家分享分享一段代碼基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-10
這篇文章主要介紹了JS實(shí)現(xiàn)圖片預(yù)覽的兩種方式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
js有效數(shù)字 顯示指定位數(shù)...2007-09-09
這篇文章主要為大家介紹了前端必會(huì)的Webpack優(yōu)化技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07