上面是今天小編來為大家分享一個使用JavaScript實現(xiàn)的掃雷小游戲的效果截圖，那么下面我們來看看我們步驟吧！這邊我們使用的是HBuilder X 編輯器，大家可以使用自己喜歡的編輯器進行編輯。
首先我們創(chuàng)建我們需要的文件（截圖如下所示）：
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="">
剩余雷數(shù) :
<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文件內(nèi)容填入：
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 = []
// 給行數(shù)，生成一個 1 維數(shù)組
var row = function (r) {
for (var i = 0; i < r; i++) {
map[i] = new Array()
}
}
// 給列數(shù)，生成一個 2 維數(shù)組
var column = function (col) {
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < col; j++) {
map[i][j] = 0
}
}
}
// 給列數(shù)和行數(shù)生成空地圖
var blankMap = function (r, col) {
row(r)
column(col)
}
// 給出地雷數(shù)量讓后隨機寫入地雷
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()
}
}
// 使用循環(huán)給雷的邊上所有數(shù) +1 , 已經(jīng)是雷的除外
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軸數(shù)量寫入 ul，然后通過 x軸上的數(shù)量寫入 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},$,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' ，如果不加這個就會進入無限循環(huán)
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)
}
// 給所有方塊綁定點擊事件，點擊顯示數(shù)字，或者 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 上面，那么就會出現(xiàn) bug
// 所以如果點擊到 span 上面，那么 el 就等于 span 的父節(jié)點
el = event.target.parentElement
}
// 已經(jīng)被標記的不能點擊
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 上面，那么就會出現(xiàn) bug
// 所以如果點擊到 span 上面，那么 el 就等于 span 的父節(jié)點
el = event.target.parentElement
}
if (el.tagName === 'LI') {
var classList = el.children[1].classList
// 已經(jīng)被點擊過的地方不能標記
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，初始數(shù)據(jù)
// zz 用來確定是否已經(jīng)點到地雷
var zz = 0
var row = 16
var col = 16
var num = 40
initializeGame(row, col, num)
// 給一個坐標，把四周變成白色
// 根據(jù)
// 綁定鼠標右擊事件，右擊鼠標的時候進行標記，
// 這個時候要進行 css 的變化
// 當所有地雷被標記，或者說所有數(shù)組中只剩 9，游戲成功。
// 選擇游戲難度
那么以上的話就是我們有關(guān)于JavaScript原生游戲的相關(guān)代碼；更多有關(guān)于JavaScript這方面的學習大家可以在下面小編分享的相關(guān)課程和教程中進行學習。
教程：
微課：
HTML+CSS響應(yīng)式網(wǎng)頁設(shè)計
視頻課：
