JavaScript实现扫雷小游戏
本文实例为大家分享了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="./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">简单</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="./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>欢迎来到扫雷游戏！<br />在最短的时间内根据点击格子出现的数字找出所有非雷格子，同时避免踩雷，踩到一个雷即全盘皆输。加油！<br />(简单难度：10个地雷；普通难度：20个地雷；高级难度：30个地雷；专家难度：40个地雷；地狱难度：50个地雷)</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() {
//清除掉所有的雷标签、图片复原、点击事件清空、计数器变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 = './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 = './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，那么显示数字，然后关闭点击事件，并且计时+1
boxs[i].src = './img/' + boxs[i].getAttribute('anum') + '.png'
win++
boxs[i].onclick = null
} else {
// 既然判断不等于0通不过，那就一定等于0了。消除所有相连的空白块。不存在的下标可以作为判断条件吗？先当可以来写
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) {
// 胜利，游戏结束，1所有的雷，变成红旗，2取消所有的点击事件 3.计时器关闭
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()
}
}
// 计时器
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)
相关推荐
-
javascript 扫雷游戏
"); for (var i = 0; i "); for(var j = 0; j "); buffer.append(" "); } buffer.append(" "); var workarea = document.getElementById("workarea"); workarea.innerHTML = buffer.toString(); mine(); // lay mines at the
-
js版扫雷实现代码 原理不错
效果图:以下代码复制粘贴到记事本后保存为.html文件,打开后会出现提示,右击允许即可: 寻雷-----by 魅月 var data=new Array( [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0
-
js实现简单扫雷
本文实例为大家分享了js实现简单扫雷的具体代码,供大家参考,具体内容如下 实现效果: 总体思想:这个扫雷难点主要就两点:第一点就是雷的随机分布,我这里使用js动态生成了10X10的table表格,然后设定生成20个雷,然后在生成每个格子代表的数字,雷我们用9表示,因为0-8要被其他非雷格子使用,然后我们只要一格是雷区那么周围的格子都加一,这样我们的雷区就生成好了,然后玩法的编写主要难点就是在当点击数字为0时的格子时要把它周围的0区也显示出来,因此这里我们使用递归来实现 1.界面的生成 //生成界
-
js实现扫雷源代码
经过一段时间学习,对javascript有了一个初步的了解自己制作了一个扫雷,源代码+详细注释放在后面,先看下效果图. 初始化界面: 游戏界面: 难易程度切换: 游戏结束: 思路 采用构造函数的形式进行全局开发 生成游戏棋盘 利用双层for循环创建设定的棋盘大小 为每个单元格的dom元素创建一个属性,该属性用于保存单元格的所有信息,如x,y坐标,value,是否为雷等 随机生成炸弹 利用随机数,随机生成炸弹x,y坐标,并将符合该坐标信息的单元格的属性更改为雷 炸弹是在用户第一次点击的时候生成,防
-
js实现扫雷小程序的示例代码
初学javascript,写了一个扫雷程序练练手! 扫雷规则及功能 扫雷想必大家都不陌生,就是windows上点击排雷的小游戏,它的主要规则有 1.左键点击显示当前格子是否为雷,如果为雷的话,GameOver啦,如果不是雷的话,这个格子会显示周围八个格子内的雷数量. 2.鼠标右键标记,标记可能的雷,标记了之后取消需要再次右键点击该格子,左键无效果. 3.鼠标中键(滚轮)按下后,快捷扫雷(如果周围雷数和未被标记且未被翻开的格子相等,会将这些格子一并翻开) 主要功能基本完全复刻了windows7扫雷
-
使用纯javascript实现经典扫雷游戏
很久以前写的 当时都没写注释的 刚加上了 (尼玛,好多自己都不认识了 ... ) 不足的地方就是本来想写个游戏排名的统计的,等有空了再加上(好像每次都这么说 然后就等好久好久...) 还有就是没有实现:点击第一个格子不能是雷的功能 <style> ul{padding:0;list-style:none;} #mine{overflow:hidden;width:30px;height:30px;border:1px solid #966;} #mine li{float:left;width
-
HTML+JavaScript实现扫雷小游戏
本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码,供大家参考,具体内容如下 工具:Sublime Text / Dreamweaver /Hbuilder <!doctype html> <html> <head> <meta charset="utf-8"> <title>SaoLei</title> <style type="text/css"> table {
-
分享自己用JS做的扫雷小游戏
引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /
-
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
本文实例讲述了JavaScript扫雷游戏.分享给大家供大家参考,具体如下: 翻出年初写的游戏贴上来,扫雷相信大家都玩过,先上图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or
-
JavaScript制作windows经典扫雷小游戏
代码其实很简单,这里就不多废话了 <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>扫雷-JavaScript Mine Sweeper