javascript實現(xiàn)掃雷簡易版
更新時間：2020年08月18日 16:44:52 作者：GMF_CodingBoy
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)掃雷簡易版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)掃雷簡易版的具體代碼，供大家參考，具體內(nèi)容如下
使用截圖
說明
這個完成的建議版本，所以沒有插旗子，沒有計時，就是最基本的原理實現(xiàn)，熟練的大佬30min就能完成
代碼講解
初始數(shù)據(jù)
var MAPSIZE = 10;
var BOMBNUM = 1;
var BOMBPOSITION = {};
var SQUAERPOSITION = {};
var SQUARECHECK = {};
var end = false;
初始化地圖(CreateMap())
用BOMBPOSITION這個hash表記錄雷的位置，然后生成地圖長*地圖寬數(shù)量的div塊然后完成定位，然后用SQUAERPOSITION記錄這些div塊并且用SQUARECHECK記錄當(dāng)前這些塊有沒有被點擊（記錄是否是未開啟塊）
function CreateMap() {
//生成初始的地圖
//根據(jù)雷的數(shù)目生成一個隨機(jī)雷數(shù)目
Create_BOMB();
for (let i = 0; i < MAPSIZE; i++) {
for (let j = 0; j < MAPSIZE; j++) {
var divEle = document.createElement("div");
divEle.className = "lattice";
divEle.style.top = 20 * i + "px";
divEle.style.left = 20 * j + "px";
divEle.onclick = function () {
//這里點擊后進(jìn)行判斷
if (end == false) {
if (BOMBPOSITION[i + "_" + j] == 1) {
//展示所有炸彈的位置
GAMEOVER();
} else {
//進(jìn)行一個遞歸的更改
Remove(i, j);
}
}
}
document.getElementById("container").appendChild(divEle);
SQUAERPOSITION[i + "_" + j] = divEle;
SQUARECHECK[i + "_" + j] = false;
}
}
}
生成雷(Create_BOMB())
這里的生成就是完善BOMBPOSITION這個hash表
function Create_BOMB() {
let bombnum = 0;
while (bombnum < BOMBNUM) {
let x = _.random(0, MAPSIZE - 1);
let y = _.random(0, MAPSIZE - 1);
if (BOMBPOSITION[x + "_" + y] == undefined) {
BOMBPOSITION[x + "_" + y] = 1;
bombnum++;
}
}
}
每個div塊的點擊事件
游戲結(jié)束GAMEOVER()
如果點到了雷就展示所有雷的位置然后游戲結(jié)束
function GAMEOVER() {
for (let index in BOMBPOSITION) {
SQUAERPOSITION[index].innerText = "@"
}
end = true;
}
處理點擊的塊(Remove())
這個處理是個遞歸過程，一個div會引起其他div的處理所有要先檢查下游戲是不是結(jié)束了，如果沒結(jié)束就遍歷周邊一圈的塊，也就是x - 1 -> x + 1 y - 1 -> y + 1，但是自身就不需要遍歷了，這里要注意，然后這些塊如果已經(jīng)被處理過了也不用進(jìn)行處理，遍歷完后如果有雷則在這個塊上記錄雷數(shù)目，如果沒有雷那么就將周邊塊中未遍歷的進(jìn)行Remove()處理，這個過程是一個遞歸，也可以理解成深度優(yōu)先級處理。
function Remove(x, y) {
if (ISGAMEOVER()) {
if (end == false) {
alert("游戲結(jié)束");
GAMEOVER();
}
return;
}
let Result_Detection = Bomb_Detection(x, y);
if (Result_Detection[0].length == 1) {
if (Result_Detection[0][0] == 0) {
//單純變顏色
Change(x, y);
} else {
//更改里面的文字是雷的數(shù)目
Change(x, y);
SQUAERPOSITION[x + "_" + y].innerText = Result_Detection[0][0];
}
} else {
//如果沒有雷自己先變化然后遍歷剩下的
Change(x, y);
for (let i = 0; i < Result_Detection.length; i++) {
//遍歷八個方向剩下的
Remove(Result_Detection[i][0], Result_Detection[i][1]);
}
//console.log(x + " " + y);
//console.log(Result_Detection);
}
}
檢測游戲是否結(jié)束(ISGAMEOVER())
就是看一下還有多少塊沒被處理，如果正好是雷的數(shù)目那就游戲結(jié)束了
function ISGAMEOVER() {
let UsedNum = 0;
for (let index in SQUARECHECK) {
if (SQUARECHECK[index] == true) {
UsedNum++;
}
}
console.log(UsedNum);
if (UsedNum == MAPSIZE * MAPSIZE - BOMBNUM)
return true;
else
return false;
}
周邊遍歷(Bomb_Detection())
如果有雷就返回[[Bomb_num]]，如果沒有雷但是周邊的都被遍歷過了就返回[[0]]，如果沒有雷然后有未被遍歷過的元素則返回未遍歷數(shù)組queue[]
function Bomb_Detection(x, y) {
let queue = [];
let bombnum = 0;
for (let i = x - 1; i <= x + 1; i++) {
for (let j = y - 1; j <= y + 1; j++) {
if ((i != x || j != y)&&Edge_Detection(i,j) == true) {
if (BOMBPOSITION[i + "_" + j] == 1) {
bombnum++;
} else if (SQUARECHECK[i + "_" + j] == false) {
queue.push([i, j]);
}
}
}
}
if (bombnum > 0) {
//如果周邊有雷
return [
[bombnum]
];
} else if (bombnum == 0 && queue.length == 0) {
//如果周邊沒雷但是所有的都被遍歷過了
return [
[0]
];
} else {
return queue;
}
}
邊界檢測(Edge_Detection())
在遍歷周邊塊的時候要注意，這個周邊塊需要是合理的
function Edge_Detection(x, y) {
//只要在0,0 -> MAPSIZE,MAPSIZE就行
if (x >= 0 && y >= 0 && x < MAPSIZE && y < MAPSIZE) {
return true
} else {
return false
}
}
處理被處理的塊(Change())
如果是周邊沒有雷那就是變成空白，如果有就寫上數(shù)字，如果是雷就里面加上@
function Change(x, y) {
SQUAERPOSITION[x + "_" + y].className = "lattice2";
SQUARECHECK[x + "_" + y] = true;
SQUAERPOSITION[x + "_" + y].style.top = 20 * x + "px";
SQUAERPOSITION[x + "_" + y].style.left = 20 * y + "px";
}
整體代碼
<!DOCTYPE html>
<html>
<head>
<title>掃雷</title>
<meta charset="utf-8">
<style>
.container {
left: 200px;
height: 200px;
width: 200px;
position: relative;
}
.lattice {
height: 20px;
width: 20px;
top: 0px;
left: 0px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
background-color: #5E5E5E;
position: absolute;
color: crimson;
}
.lattice2 {
height: 20px;
width: 20px;
top: 0px;
left: 0px;
border-style: solid;
border-width: 1px;
border-color: #5E5E5E;
background-color: #ffffff;
position: absolute;
color: black;
}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/lodash.js/4.16.6/lodash.min.js"></script>
<script>
var MAPSIZE = 10;
var BOMBNUM = 1;
var BOMBPOSITION = {};
var SQUAERPOSITION = {};
var SQUARECHECK = {};
var end = false;
function Init() {
CreateMap();
}
function CreateMap() {
//生成初始的地圖
//根據(jù)雷的數(shù)目生成一個隨機(jī)雷數(shù)目
Create_BOMB();
for (let i = 0; i < MAPSIZE; i++) {
for (let j = 0; j < MAPSIZE; j++) {
var divEle = document.createElement("div");
divEle.className = "lattice";
divEle.style.top = 20 * i + "px";
divEle.style.left = 20 * j + "px";
divEle.onclick = function () {
//這里點擊后進(jìn)行判斷
if (end == false) {
if (BOMBPOSITION[i + "_" + j] == 1) {
//展示所有炸彈的位置
GAMEOVER();
} else {
//進(jìn)行一個遞歸的更改
Remove(i, j);
}
}
}
document.getElementById("container").appendChild(divEle);
SQUAERPOSITION[i + "_" + j] = divEle;
SQUARECHECK[i + "_" + j] = false;
}
}
}
function Create_BOMB() {
let bombnum = 0;
while (bombnum < BOMBNUM) {
let x = _.random(0, MAPSIZE - 1);
let y = _.random(0, MAPSIZE - 1);
if (BOMBPOSITION[x + "_" + y] == undefined) {
BOMBPOSITION[x + "_" + y] = 1;
bombnum++;
}
}
}
function Remove(x, y) {
if (ISGAMEOVER()) {
if (end == false) {
alert("游戲結(jié)束");
GAMEOVER();
}
return;
}
let Result_Detection = Bomb_Detection(x, y);
if (Result_Detection[0].length == 1) {
if (Result_Detection[0][0] == 0) {
//單純變顏色
Change(x, y);
} else {
//更改里面的文字是雷的數(shù)目
Change(x, y);
SQUAERPOSITION[x + "_" + y].innerText = Result_Detection[0][0];
}
} else {
//如果沒有雷自己先變化然后遍歷剩下的
Change(x, y);
for (let i = 0; i < Result_Detection.length; i++) {
//遍歷八個方向剩下的
Remove(Result_Detection[i][0], Result_Detection[i][1]);
}
//console.log(x + " " + y);
//console.log(Result_Detection);
}
}
function Change(x, y) {
SQUAERPOSITION[x + "_" + y].className = "lattice2";
SQUARECHECK[x + "_" + y] = true;
SQUAERPOSITION[x + "_" + y].style.top = 20 * x + "px";
SQUAERPOSITION[x + "_" + y].style.left = 20 * y + "px";
}
function GAMEOVER() {
for (let index in BOMBPOSITION) {
SQUAERPOSITION[index].innerText = "@"
}
end = true;
}
function ISGAMEOVER() {
let UsedNum = 0;
for (let index in SQUARECHECK) {
if (SQUARECHECK[index] == true) {
UsedNum++;
}
}
console.log(UsedNum);
if (UsedNum == MAPSIZE * MAPSIZE - BOMBNUM)
return true;
else
return false;
}
function Bomb_Detection(x, y) {
let queue = [];
let bombnum = 0;
for (let i = x - 1; i <= x + 1; i++) {
for (let j = y - 1; j <= y + 1; j++) {
if ((i != x || j != y)&&Edge_Detection(i,j) == true) {
if (BOMBPOSITION[i + "_" + j] == 1) {
bombnum++;
} else if (SQUARECHECK[i + "_" + j] == false) {
queue.push([i, j]);
}
}
}
}
if (bombnum > 0) {
//如果周邊有雷
return [
[bombnum]
];
} else if (bombnum == 0 && queue.length == 0) {
//如果周邊沒雷但是所有的都被遍歷過了
return [
[0]
];
} else {
return queue;
}
}
function Edge_Detection(x, y) {
//只要在0,0 -> MAPSIZE,MAPSIZE就行
if (x >= 0 && y >= 0 && x < MAPSIZE && y < MAPSIZE) {
return true
} else {
return false
}
}
</script>
</head>
<body onload="Init()">
<div class="container" id="container">
</div>
</body>
</html>
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄薷膌igerui 默認(rèn)確認(rèn)按鈕的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
今天在使用uni-app開發(fā)登錄頁面時遇到一個需求，需要禁用返回按鈕,下面這篇文章主要給大家介紹了關(guān)于uni-app禁用返回按鈕/返回鍵的具體實現(xiàn),需要的朋友可以參考下2022-11-11
layuiAdmin循環(huán)遍歷展示商品圖片列表的方法
今天小編就為大家分享一篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本文介紹了 15 個非常強(qiáng)大的 JavaScript Web UI 庫，非常適合各種各種規(guī)模的富 Web 應(yīng)用的開發(fā)。2010-05-05
這篇文章主要為大家詳細(xì)介紹了laypage+SpringMVC實現(xiàn)后端分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
判斷文件類型控制表單提交這些都是在客戶端實現(xiàn)的，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
用nodejs實現(xiàn)PHP的print_r函數(shù)代碼
這篇文章主要介紹了用nodejs實現(xiàn)PHP的print_r函數(shù)代碼,需要的朋友可以參考下2014-03-03
這篇文章主要為大家介紹了js前端獲取用戶位置及ip屬地信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
微信小程序授權(quán)登陸及每次檢查是否授權(quán)實例代碼
這篇文章主要介紹了關(guān)于微信小程序授權(quán)登陸及每次檢查是否授權(quán),本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09