原生js實(shí)現(xiàn)自定義難度的掃雷游戲
更新時(shí)間：2021年01月22日 16:32:41 作者：清歡灬
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義難度的掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)掃雷游戲的具體代碼，供大家參考，具體內(nèi)容如下
游戲功能：
1、有四個(gè)難度
2、可以自定難度
1、html相關(guān)代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>掃雷</title> <script src="js/mine.js"></script> <link rel="stylesheet" href="./css/mine.css" > </head> <!-- 需求分析： 1.游戲的區(qū)域： 9*9的區(qū)域 2.方格可以打開(kāi)與標(biāo)記 左鍵打開(kāi)，顯示數(shù)字，為周圍格子的地雷數(shù)，右鍵標(biāo)記 3.地雷 地雷隨機(jī)分布 4.踩到地雷時(shí)，游戲結(jié)束 所有的地雷顯示出來(lái) 5.連鎖開(kāi)大空方格 6.剩余地雷數(shù)與計(jì)時(shí)器 7.游戲勝利條件 所有的方格除了地雷都被打開(kāi)了，則游戲勝利 一個(gè)方格所包含的信息： 坐標(biāo) x y 是否是一個(gè)地雷 周圍的地雷數(shù) = 9 二維數(shù)組中存儲(chǔ)的是周圍的地雷數(shù) --> <body> <div class="level"> <button type="button" name="button" class="choice-level">自定義</button> <button type="button" name="button" class="choice-level">初級(jí)</button> <button type="button" name="button" class="choice-level">中級(jí)</button> <button type="button" name="button" class="choice-level">高級(jí)</button> <button type="button" name="button" class="choice-level">魔鬼級(jí)</button> <button type="button" name="button" class="restart">重新開(kāi)始</button> </div> <div class="gameBox"></div> <div class="info"> <p>剩余雷數(shù)： <span class="residue"></span> </p> <p> TIME： <span class="tick"></span>S </p> </div> </body> </html>
2、css樣式
*{
margin: 0;
padding: 0;
}
.gameBox{
margin-top: 30px;
}
body{
font-size: 0;
}
ul{
list-style: none;
text-align: center;
overflow: hidden;
}
.col{
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
background-color: rgba(32, 226, 255, 0.4);
border: 1px solid rgb(129, 129, 129);
font-size: 16px;
margin: 1.5px;
vertical-align: top;
position: relative;
}
.col:hover{
background-color: #0af;
}
.col span{
cursor: default;
}
.hide{
display: none;
}
.boom{
background: url("../img/boom.svg") no-repeat 2.5px 2px;
background-size: 18px 18px;
}
.num-1{
color: rgb(8, 153, 235);
}
.num-2{
color: rgb(255, 45, 178);
}
.num-3{
color:#16a085;
}
.num-4{
color: #8e44ad;
}
.num-5{
color: rgb(255, 167, 45);
}
.num-6{
color: rgb(8, 126, 176);
}
.num-7{
color: #e67e22;
}
.num-8{
color: #c0392b;
}
.img-flag{
width: 18px;
height: 18px;
position: absolute;
top: 3px;
left: 3px;
}
.level{
margin-top: 30px;
font-size: 20px;
text-align: center;
}
.level button{
padding: 5px 8px;
background-color: rgb(67, 183, 189);
border: none;
outline: none;
border-radius: 3px;
cursor: pointer;
color: #fff;
}
.level button:hover{
background-color: rgb(23, 132, 138);
}
.info{
margin-top: 30px;
font-size: 16px;
text-align: center;
}
.info p{
display: inline-block;
width: 130px;
margin: 0 auto;
}
.info p span{
color: rgb(67, 183, 189);
}
3、js代碼
window.onload = function() {
var row = 4;
var col = 4;
var num = 1;
// 判斷踩雷之后不能勝利
var gg = false;
// 生成地圖
function mineMap(r, c, num) {
// 定義行
var map = [];
//給行數(shù)，生成二維數(shù)組
for (var i = 0; i < r; i++) {
map[i] = new Array()
}
// 賦值
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < c; j++) {
// //周圍的地雷數(shù)
map[i][j] = 0;
}
}
var plus = function(array, x, y) {
if (x >= 0 && x < r && y >= 0 && y < c) {
if (array[x][y] !== 9) {
array[x][y]++
}
}
}
for (var i = 0; i < num; i++) {
var x = Math.floor(Math.random() * r)
var y = Math.floor(Math.random() * c)
if (map[x][y] != 9) {
map[x][y] = 9
//上下6個(gè) +1
for (var j = -1; j < 2; j++) {
//上三個(gè)
plus(map, x - 1, y + j)
//下三個(gè)
plus(map, x + 1, y + j)
}
//左右2個(gè) +1
plus(map, x, y - 1)
plus(map, x, y + 1)
} else {
//重新隨機(jī)
num++
}
}
return map;
}
//先通過(guò)x軸數(shù)量寫(xiě)入ul，再講過(guò)y軸的屬性寫(xiě)入li
function writeHtml(map) {
// 獲取盒子
var gameBox = document.querySelector(".gameBox");
// 聲明空字符串，存放生成的ul、li
var gridHTML = "";
for (var i = 0; i < map.length; i++) {
gridHTML += '<ul class = "row" data-x="' + i + '">';
//生成li
for (var j = 0; j < map[0].length; j++) {
var m = map[i][j]
if (m == 0) {
m = "";
}
gridHTML += "<li class='col' data-y=" + j + ">" +
"<span class='hide num-" + m + "'>" + m + "</span>" +
"<img src='img/flag.svg' class='img-flag hide'>" +
"</li>"
}
gridHTML += '</ul>'
gameBox.innerHTML = gridHTML;
}
}
//給方格綁定事件， 點(diǎn)開(kāi)數(shù)字 地雷 右鍵標(biāo)記
function show() {
// 獲取行ul
var rows = document.querySelectorAll(".row");
// 遍歷所有ul
for (var i = 0; i < rows.length; i++) {
var element = rows[i];
// 添加點(diǎn)擊事件
element.onclick = function(event) {
// 當(dāng)前點(diǎn)擊元素
var el = event.target;
// 判斷是否為li
if (el.nodeName != "LI") {
return;
}
//todo 判斷是否被打開(kāi)以及標(biāo)記了
if (el.style.background == "white" || !el.children[1].classList.contains("hide")) {
return;
}
// 獲取span標(biāo)簽內(nèi)容
var mineNum = el.children[0].innerHTML;
if (mineNum !== "9" && el.style.background !== "white") {
// 空白連鎖打開(kāi)
if (mineNum == "") {
var x = parseInt(el.parentNode.dataset.x);
var y = parseInt(el.dataset.y);
showNoMine(x, y);
}
// li背景變白色；span顯示
el.style.background = "white";
el.children[0].style.display = "inline";
// 判斷打開(kāi)數(shù)量
clearMineNum++;
// 勝利函數(shù)
judgeVictory()
} else if (mineNum == "9") {
// 清除勝利計(jì)時(shí)器
clearInterval(stopTime);
// li添加類名
el.classList.add("boom");
alert("你真菜！")
gg = true;
// 顯示所有地雷,獲取所有l(wèi)i
var all = document.querySelectorAll(".col");
// 放置所有的地雷
var ff = [];
var allnum = 0;
// 遍歷所有l(wèi)i
for (var i = 0; i < all.length; i++) {
if (all[i].children[0].innerHTML == "9") {
// 雷賦值給數(shù)組
ff[allnum] = all[i];
allnum++;
}
}
// 設(shè)置一個(gè)計(jì)時(shí)器一個(gè)一個(gè)打開(kāi)雷
allnum = 0;
var stop = setInterval(function() {
ff[allnum].classList.add("boom")
allnum++;
// 判斷結(jié)束條件
if (allnum == ff.length) {
// 清除計(jì)時(shí)器
clearInterval(stop);
}
}, 30)
}
}
// 右鍵標(biāo)記地雷
element.oncontextmenu = function(event) {
// 阻止右鍵菜單
event.preventDefault();
// 獲取當(dāng)前點(diǎn)擊節(jié)點(diǎn)
var el = event.target;
// 判斷是否是
if (el.parentNode.nodeName == "LI") {
el = el.parentNode;
}
if (el.nodeName != "LI") {
return;
}
// 獲取img
var classList = el.children[1].classList;
// 剩余雷數(shù)
var residue = document.querySelector(".residue");
var mineNum = parseInt(residue.innerHTML);
// 如果沒(méi)有旗子，沒(méi)有被點(diǎn)開(kāi)，可以插旗子
if (classList.contains("hide") && el.style.background != "white") {
// 移除隱藏
classList.remove("hide");
// 獲取雷數(shù)
mineNum--;
} else if (el.style.background != "white") {
classList.add("hide");
// 判斷雷數(shù)
if (mineNum < num) {
mineNum++;
}
}
// 剩余雷數(shù)
residue.innerHTML = mineNum;
}
}
}
function judgeVictory() {
//游戲勝利
if (clearMineNum === (row * col - num)) {
//做一個(gè)小動(dòng)畫(huà)
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 = Math.floor(Math.random() * 256)
all[allNum].style.background = "rgba(" + r + "," + g + "," + b + ",0.6)";
//將旗子和span都隱藏
all[allNum].children[0].style.display = "none"
all[allNum].children[1].style.display = "none"
allNum++
if (allNum === all.length) {
clearInterval(stop)
if (!gg) {
alert("大吉大利，今晚吃雞")
init(row, col, num)
}
}
}, 20)
}
}
//自動(dòng)打開(kāi)空格
function showNoMine(x, y) {
for (var i = -1; i <= 1; i++) {
if (x + i >= 0 && x + i < row) {
// 獲取當(dāng)前行
var rowElement = document.querySelectorAll(".row")[x + i];
for (var j = -1; j <= 1; j++) {
if (y + j >= 0 && y + j < col) {
//獲取當(dāng)前單元格
var el = rowElement.children[y + j]
//自動(dòng)打開(kāi)必須是未打開(kāi)的方格
if (el.style.background != "white") {
el.style.background = "white"
el.children[0].style.display = "inline"
//打開(kāi)方格數(shù)量+1
clearMineNum++
//判斷游戲是否勝利
judgeVictory(clearMineNum)
if (el.children[0].innerText === "") {
showNoMine(x + i, y + j)
}
}
}
}
}
// if (x + i >= 0 && x + i < row) {
// // 獲取當(dāng)前行
// var rowElement = document.querySelectorAll(".row")[x + i];
// for (var j = -1; j <= 1; j++ && y + j < col) {
// // 獲取當(dāng)前單元格
// var el = rowElement.children[y + j];
// if (el.style.background !== "white") {
// el.style.background = "white";
// el.children[0].style.display = "inline";
// // 打開(kāi)放格數(shù)量加1
// clearMineNum++;
// // 判斷游戲是否勝利
// judgeVictory(clearMineNum);
// // 判斷打開(kāi)周圍的放格周圍是否為空
// if (el.children[0].innerHTML === "") {
// showNoMine(x + i, y + j)
// }
// }
// }
// }
}
}
//初始化方法
var stopTime;
function init(row, col, num) {
//數(shù)據(jù)初始化
clearMineNum = 0
gg = false;
//清除原來(lái)的地圖，生成新的地圖
var box = document.querySelector(".gameBox")
box.innerHTML = "";
var map = mineMap(row, col, num);
// 新建地圖
writeHtml(map);
show()
//將雷數(shù)寫(xiě)入html中
var residue = document.querySelector(".residue")
residue.innerHTML = num
// 獲取計(jì)時(shí)
var tick = document.querySelector(".tick");
var i = 0;
// 初始化
tick.innerHTML = i;
// 清除計(jì)時(shí)
clearInterval(stopTime);
// 時(shí)間計(jì)時(shí)器
stopTime = setInterval(function() {
tick.innerHTML = ++i
}, 1000)
}
// 重置
var restart = document.querySelector(".restart");
restart.onclick = function(event) {
//阻止冒泡
event.stopPropagation()
init(row, col, num)
}
// 自定義
var level = document.querySelector(".level")
level.onclick = function(event) {
var el = event.target;
switch (el.innerHTML) {
case "初級(jí)":
row = 9;
col = 9;
num = 10;
init(row, col, num)
break;
case "中級(jí)":
row = 16;
col = 16;
num = 40;
init(row, col, num)
break;
case "高級(jí)":
row = 16;
col = 30;
num = 479;
init(row, col, num)
break;
case "魔鬼級(jí)":
row = 40;
col = 50;
num = 300;
init(row, col, num)
break;
case "自定義":
row = prompt("請(qǐng)輸入列數(shù)！");
col = prompt("請(qǐng)輸入行數(shù)！");
num = prompt("請(qǐng)輸入你想要的雷數(shù)，（請(qǐng)慎重選擇）");
init(row, col, num);
break;
default:
row = 9;
col = 9;
num = 10;
init(row, col, num)
break;
}
}
init(row, col, num)
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于JavaScript實(shí)現(xiàn)簡(jiǎn)單掃雷游戲
- js+canvas實(shí)現(xiàn)簡(jiǎn)單掃雷小游戲
- 通過(guò)javascript實(shí)現(xiàn)掃雷游戲代碼實(shí)例
- HTML+JavaScript實(shí)現(xiàn)掃雷小游戲
- JavaScript版經(jīng)典游戲之掃雷游戲完整示例【附demo源碼下載】
- 分享自己用JS做的掃雷小游戲
- 使用純javascript實(shí)現(xiàn)經(jīng)典掃雷游戲
- JavaScript制作windows經(jīng)典掃雷小游戲
- javascript 掃雷游戲
- js實(shí)現(xiàn)經(jīng)典掃雷游戲
相關(guān)文章
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)留言板功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)新建文件夾功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript利用append添加元素報(bào)錯(cuò)的解決方法
這篇文章主要介紹了JavaScript利用append添加元素報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2014-07-07
JS實(shí)現(xiàn)從對(duì)象獲取對(duì)象中單個(gè)鍵值的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)從對(duì)象獲取對(duì)象中單個(gè)鍵值的方法,涉及javascript數(shù)組對(duì)象遍歷、事件監(jiān)聽(tīng)、處理等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
javascript動(dòng)畫(huà)效果打開(kāi)/關(guān)閉層
用javascript實(shí)現(xiàn)打開(kāi)層和關(guān)閉層的效果，原理不錯(cuò)，學(xué)習(xí)，記錄好2008-06-06
采用CSS覆蓋的方法就可以了，但是官方是不允許這么做的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09
盡管 JavaScript 歷史上使用冗長(zhǎng)而令人生厭的代碼塊來(lái)標(biāo)的特定瀏覽器的時(shí)期已經(jīng)結(jié)束了，但是偶爾使用一些簡(jiǎn)單的代碼塊和對(duì)象檢測(cè)來(lái)確保一些代碼在用戶機(jī)器上正常工作依然是必要的。2009-05-05
用 js 寫(xiě)一個(gè) js 解釋器過(guò)程詳解
這篇文章主要介紹了用 js 寫(xiě)一個(gè) js 解釋器過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了js獲取某元素的class里面的css屬性值代碼，有需要的朋友可以參考一下2014-01-01
微信小程序中選中手機(jī)相冊(cè)圖片上傳到服務(wù)器的步驟
這篇文章主要介紹了微信小程序中選中手機(jī)相冊(cè)圖片上傳到服務(wù)器的步驟,現(xiàn)圖片上傳我們需要使用chooseImg和uploadFile這兩個(gè)api,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-04-04