本篇文章给大家分享的是有关怎么使用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是一种动态类型、弱类型的语言，基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言。它主要用来给HTML网页添加动态功能，现在JavaScript也可被用于网络服务器，如Node.js。
以上就是怎么使用JavaScript实现扫雷小游戏，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
