溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
