本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码，供大家参考，具体内容如下
先说大体思路，下面放代码
思路：
1产生指定数量的地雷
2计算方块周围的地雷
3点击地雷结束
4点击地雷周边显示地雷个数
5点击空白块，消除所有相连的空白块
6游戏主体已经完成了。剩下就是完善一些小细节，例如胜利判断 ，失败露出苦瓜脸 ，难度切换，新游戏按钮 等等…
首先是html+css的代码
扫雷v1.0 
10
00:00
欢迎来到扫雷游戏！
在最短的时间内根据点击格子出现的数字找出所有非雷格子，同时避免踩雷，踩到一个雷即全盘皆输。加油！
(简单难度：10个地雷；普通难度：20个地雷；高级难度：30个地雷；专家难度：40个地雷；地狱难度：50个地雷)
然后是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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。