使用JavaScript实现扫雷小游戏！附加源码！
2021-11-26 10:51:13
浏览数 (4034)
上面是今天小编来为大家分享一个使用JavaScript实现的扫雷小游戏的效果截图，那么下面我们来看看我们步骤吧！这边我们使用的是HBuilder X 编辑器，大家可以使用自己喜欢的编辑器进行编辑。
首先我们创建我们需要的文件（截图如下所示）：
1、编辑inde.html文件：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="jin.css">
</head>
<body>
<div class="level">
<button type="button" name="button" class="choice-level">初级</button>
<button type="button" name="button" class="choice-level">中级</button>
<button type="button" name="button" class="choice-level">高级</button>
<button type="button" name="button" class="restart">重新开始</button>
</div>
<div class="gameBox"></div>
<div class="info">
<p class="">
剩余雷数 :
<span class="residue"></span>
</p>
<p>
TIME :
<span class="tick"></span> S
</p>
</div>
<script src="jin.js" charset="utf-8"></script>
</body>
</html>2、jin.css文件内容填入：
body {
text-align: center;
position: relative;
}
.level {
margin-top: 30px;
font-size: 18px;
}
.level button {
padding: 3px 8px;
background: rgb(67, 183, 189);
/* border: 1px solid rgb(129, 129, 129); */
border: none;
color: white;
border-radius: 3px;
outline: none;
cursor:pointer;
}
.level button:hover {
background: rgb(23, 132, 138);
}
.row {
margin: 0;
padding: 0;
overflow: hidden;
letter-spacing: -8px;
}
.col {
display: inline-block;
background: rgba(32, 226, 255, 0.41);
border: 1px solid rgb(129, 129, 129);
margin: 1.5px;
width: 23px;
height: 23px;
letter-spacing: normal;
position: relative;
}
.col span {
display: inline-block;
position: relative;
top: 2px;
opacity: 0;
font-weight: bold;
/* 标准箭头 */
cursor:default;
}
.col:hover {
background: blue;
}
.gameBox {
margin-top: 30px;
}
.img-flag {
position: absolute;
top: 3px;
left: 3.5px;
width: 18px;
height: 18px;
}
.hide {
display: none;
}
.boom {
background: url('boom.svg') no-repeat 2.5px 2px;
background-size: 18px 18px;
}
.div-boom {
font-size: 30px;
position: fixed;
top: 50px;
left: 50%;
}
.info {
margin-top: 30px;
}
.info p {
display: inline-block;
width: 130px;
margin: 0 10px;
}
.info p span {
color: rgb(67, 183, 189);
}
.num-1 {
color: rgb(8, 153, 235);
}
.num-2 {
color: rgb(255, 45, 178);
}
.num-3 {
color: rgb(109, 224, 176);
}
.num-4 {
color: rgb(8, 153, 235);
}
.num-5 {
color: rgb(255, 167, 45);
}
.num-6 {
color: rgb(49, 140, 102);
}
.num-7 {
color: rgb(168, 55, 237);
}
.num-8 {
color: rgb(15, 254, 154);
}
3、jin.js文件：
// 1，成一张雷的地图
var mineSweepingMap = function (r, c, num) {
var map = []
// 给行数，生成一个 1 维数组
var row = function (r) {
for (var i = 0; i < r; i++) {
map[i] = new Array()
}
}
// 给列数，生成一个 2 维数组
var column = function (col) {
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < col; j++) {
map[i][j] = 0
}
}
}
// 给列数和行数生成空地图
var blankMap = function (r, col) {
row(r)
column(col)
}
// 给出地雷数量让后随机写入地雷
var writeInMine = function (num) {
// 随机位置写入
var randomLocation = function () {
var x = Math.floor(Math.random() * r)
var y = Math.floor(Math.random() * c)
// console.log( ':', x, y);
if (map[x][y] !== 9) {
map[x][y] = 9
} else {
randomLocation()
}
}
for (var i = 0; i < num; i++) {
randomLocation()
}
}
// 使用循环给雷的边上所有数 +1 , 已经是雷的除外
var plus = function (array, x, y) {
if (x >= 0 && x < r && y >= 0 && y < c) {
if (array[x][y] !== 9) {
array[x][y] += 1
}
}
}
var writeInHint = function () {
for (var x = 0; x < map.length; x++) {
for (var y = 0; y < map[0].length; y++) {
if (map[x][y] === 9) {
// 上下 6 个
for (var i = -1; i < 2; i++) {
plus(map, x - 1, y + i)
plus(map, x + 1, y + i)
}
// 左右 2 个
plus(map, x, y + 1)
plus(map, x, y - 1)
}
}
}
}
blankMap(r, c)
writeInMine(num)
writeInHint()
return map
}
// 2，将雷写入页面
var writeHtml = function (map) {
// 先通过 y轴数量写入 ul，然后通过 x轴上的数量写入 li
var x = document.querySelector('.gameBox')
for (var i = 0; i < map.length; i++) {
x.innerHTML = x.innerHTML + `<ul class="row x-${i}" data-x="${i}"></ul>`
}
var z = document.querySelectorAll('.row')
for (var i = 0; i < z.length; i++) {
for (var j = 0; j < map[0].length; j++) {
var m = map[i][j]
if (m === 0) {
m = ''
}
z[i].innerHTML = z[i].innerHTML + `
<li class="col y-${j} num-${m}" data-y="${j}">
<span>${m}</span>
<img src="flag.svg" class="img-flag hide">
</li>`
}
}
}
// 判断是否胜利
var changeClearMineNum = function (clearMineNum) {
// console.log('zmzmzmzm');
// console.log('zz', zz);
if (clearMineNum === ((col * row) - num)) {
var all = document.querySelectorAll('.col')
var allNum = 0
var stop = setInterval(function () {
var r = Math.floor(Math.random() * 256)
var g = Math.floor(Math.random() * 256)
var b = 210
// var b = Math.floor(Math.random() * 256)
all[allNum].children[0].style.opacity = `0`
all[allNum].children[1].style.opacity = '0'
all[allNum].style.background = `rgba(${r},${g},${b},0.6)`
allNum++
if (allNum === all.length) {
clearInterval(stop)
if (zz === 0) {
alert('你成功啦~！！晚上吃肉~~！')
initializeGame(row, col, num)
}
initializeGame(row, col, num)
}
}, 20)
}
}
// 3，扫雷过程
var clearMine = function (row, col, num) {
var clearMineNum = 0
var makeWhite = function (x, y) {
if (x < row && y < col && x >= 0 && y >= 0) {
var el = document.querySelector(`.x-${x}`).children[y]
// 需要注意这个 ！== 'white' ，如果不加这个就会进入无限循环
if (el.style.background !== 'white') {
el.style.background = 'white'
el.children[0].style.opacity = '1'
el.children[1].classList.add('hide')
clearMineNum++
// console.log(clearMineNum, 'clearMineNum');
changeClearMineNum(clearMineNum)
if (el.innerText === '') {
showNoMine(x, y)
}
}
}
}
// 智能扫雷
var showNoMine = function (x, y) {
// console.log(x, y, 'x,y');
makeWhite(x - 1, y + 1)
makeWhite(x - 1, y - 1)
makeWhite(x - 1, y)
makeWhite(x + 1, y + 1)
makeWhite(x + 1, y - 1)
makeWhite(x + 1, y)
makeWhite(x, y + 1)
makeWhite(x, y - 1)
}
// 给所有方块绑定点击事件，点击显示数字，或者 boom
var show = function () {
// var x = document.querySelectorAll('.col')
var x = document.querySelectorAll('.row')
for (var i = 0; i < x.length; i++) {
x[i].addEventListener('click', function (event) {
var el = event.target
if (el.tagName != 'LI') {
// 因为事件委托的原因
// 如果点击到了 span 上面，那么就会出现 bug
// 所以如果点击到 span 上面，那么 el 就等于 span 的父节点
el = event.target.parentElement
}
// 已经被标记的不能点击
var flag = el.children[1].classList.contains('hide')
if (el.tagName === 'LI' && flag) {
if (el.children[0].innerText !== '9' && el.style.background !== 'white') {
el.children[0].style.opacity = '1'
el.style.background = 'white'
clearMineNum++
changeClearMineNum(clearMineNum)
// console.log(clearMineNum, 'clearMineNum');
} else if (el.children[0].innerText === '9') {
// el.children[0].style.opacity = '1'
zz = 1
el.classList.add('boom')
alert('游戏失败')
var all = document.querySelectorAll('.col')
var ff = []
var allNum = 0
// 这里做了个小动画，失败的时候慢慢的显示雷的位置
for (var i = 0; i < all.length; i++) {
if (all[i].children[0].innerText === '9') {
// all[i].style.background = 'red'
ff[allNum] = all[i]
allNum++
}
}
allNum = 0
var time = 60
if (num > 50) {
time = 10
} else if (num > 10) {
time = 25
}
var stop = setInterval(function () {
ff[allNum].classList.add('boom')
allNum++
if (allNum === ff.length) {
clearInterval(stop)
// console.log('stop');
}
}, time)
// var box = document.querySelector('.gameBox')
// box.innerHTML = ''
// var level = event.target.innerHTML
// var body = document.querySelector('body')
// initializeGame(row, col, num)
}
// 如果点击的方格为空（什么有没有），那么周围没有点开的空方格都会被点开
if (el.children[0].innerText === '') {
// 获取到位置
var x = parseInt(el.parentElement.dataset.x)
var y = parseInt(el.dataset.y)
// console.log(x,y, 'data');
// 背景变成白色
showNoMine(x, y)
}
}
})
}
for (var i = 0; i < x.length; i++) {
var mineNum = num
x[i].addEventListener('contextmenu', function (event) {
event.preventDefault();
var btnNum = event.button
var el = event.target
if (el.tagName != 'LI') {
// 因为事件委托的原因
// 如果点击到了 span 上面，那么就会出现 bug
// 所以如果点击到 span 上面，那么 el 就等于 span 的父节点
el = event.target.parentElement
}
if (el.tagName === 'LI') {
var classList = el.children[1].classList
// 已经被点击过的地方不能标记
if (classList.contains('hide') && el.style.background !== 'white') {
var residue = document.querySelector('.residue')
if (mineNum !== 0) {
mineNum--
}
residue.innerText = `${mineNum}`
classList.remove('hide')
} else if (el.style.background !== 'white') {
classList.add('hide')
}
}
})
}
}
show()
}
// 4，清除画面，然后写入新的画面
var stopTime
var initializeGame = function (row, col, num) {
var residue = document.querySelector('.residue')
residue.innerText = `${num}`
var time = document.querySelector('.tick')
time.innerText = `0`
var i = 1
clearInterval(stopTime)
stopTime = setInterval(function () {
time.innerText = `${i++}`
}, 1000)
// zz
zz = 0
// 首先清除原来的地图，然后重新初始化
var box = document.querySelector('.gameBox')
box.innerHTML = ''
var body = document.querySelector('body')
body.style.minWidth = `${27 * col}px`
var map = mineSweepingMap(row, col, num)
writeHtml(map)
clearMine(row, col, num)
}
// 5，选择游戏等级，给按钮绑定功能
var Btn = function () {
var level = document.querySelectorAll('.choice-level')
for (var i = 0; i < level.length; i++) {
level[i].addEventListener('click', function (event) {
var level = event.target.innerHTML
if (level === '初级') {
row = 9
col = 9
num = 10
initializeGame(row, col, num)
} else if (level === '中级') {
row = 16
col = 16
num = 40
initializeGame(row, col, num)
} else if (level === '高级') {
row = 16
col = 30
num = 99
initializeGame(row, col, num)
}
})
}
var restart = document.querySelector('.restart')
restart.addEventListener('click', function (event) {
initializeGame(row, col, num)
})
}
Btn()
// 6，初始数据
// zz 用来确定是否已经点到地雷
var zz = 0
var row = 16
var col = 16
var num = 40
initializeGame(row, col, num)
// 给一个坐标，把四周变成白色
// 根据
// 绑定鼠标右击事件，右击鼠标的时候进行标记，
// 这个时候要进行 css 的变化
// 当所有地雷被标记，或者说所有数组中只剩 9，游戏成功。
// 选择游戏难度
那么以上的话就是我们有关于JavaScript原生游戏的相关代码；更多有关于JavaScript这方面的学习大家可以在下面小编分享的相关课程和教程中进行学习。
教程：
微课：
视频课：