基於JavaScript實現簡單掃雷遊戲
對於10年前的人來說，掃雷肯定是傢喻戶曉，由於當時的科技並不是很發達，大傢對於電腦遊戲的瞭解，可能都是從掃雷開始的，今天就交大傢一種用js原生代碼寫一個簡單的掃雷遊戲，話不多說，直接上幹貨：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
border: 1px solid #666;
position: fixed;
width: 300px;
height: 350px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.btn-group{
display: flex;
height: 50px;
line-height: 50px;
text-align: center;
justify-content: space-evenly;
font-size: 12px;
}
.row{
height: 30px;
line-height: 30px;
text-align: center;
display: flex;
}
.col{
flex-shrink: 0;
/* flex-shrink 是否允許縮小 */
flex-grow: 0;
/* flex-grow 是否允許放大 */
width: 30px;
height: 30px;
border: 1px solid #666;
background-color: #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div class="qipan">
</div>
<div class="btn-group">
<div class="btn-item">
<span class="item-name">時間</span>
<span class="item-value passTime">000</span>
</div>
<div class="btn-item">
<span class="item-name">剩餘雷數</span>
<span class="item-value leftLei">10</span>
</div>
<div class="btn-item">
<select class="level">
<option value="1">初級</option>
<option value="2">中級</option>
<option value="3">高級</option>
</select>
</div>
<div class="btn-item">
<span class="start">開始</span>
<span class="restart">重開</span>
</div>
</div>
</div>
<script>
function $(s,t){
if(t == 'l'){
return document.querySelectorAll(s)
}else{
return document.querySelector(s)
}
}
var qipan = $('.qipan'),
box = $('.box'),
level = $('.level'),
leftLei = $('.leftLei'),
start = $('.start'),
restart = $('.restart'),
passTime = $('.passTime')
;
var row = 10,// 行數
col = 10,// 列數
leiNum = 10,// 雷數
restNum = 10,//剩餘的雷數
flag = false,// 格子是否可以被點擊
time,//計時器的名字
count = 0,// 計時的秒數
leiList = [],// 用來存放地雷坐標的數組
sum = col*row,// 棋盤所有格子的總數
openGz = 0,// 已經點開的格子的數量
color = ['rgba(0,0,255,.6)','rgba(0,255,0,.6)','red','blue','yellow','pink','auqa','black']
;
window.oncontextmenu = function(e){
e.preventDefault();
if(!flag){
alert('請先點開始！');
return;
}
if(e.target.isOpen){
alert('這個格子已經翻過瞭，換個格子標記');
return
}
if(e.target.localName == 'li'){
if(e.target.isMark){
e.target.isMark = false;
e.target.innerHTML = '';
restNum++;
}else{
e.target.isMark = true;
e.target.innerHTML = '▲';
e.target.style.color = 'red';
restNum--;
}
leftLei.innerHTML = restNum
}
}
start.onclick = function(){//點擊開始遊戲
flag = true;// 棋盤可以被點擊
if(time>0){// 判斷開始鍵是否已經被點過,防止重復點擊
alert('遊戲已經開始瞭,不要再點開始瞭')
return
}
countTime()//開始計時
}
restart.onclick = function(){//點擊開始遊戲
flag = false;// flag置為false，棋盤格子變成不可點擊狀態
createQp();// 畫棋盤
}
box.onclick = function(e){//點擊棋盤的格子
var t = e.target;
if(t.localName == 'li'){// 隻有當點擊的格子是li的時候才會繼續往下判斷
if(!flag){// 如果當前不允許點擊，提示先點開始
alert('請先點開始！')
return
}
var x = t.dataset.x - 0 ,y = t.dataset.y - 0;
// console.log(x,y);
if(t.isOpen){
alert('這個格子已經翻過瞭，換個格子翻');
return
}
if(t.isMark){
alert('這個格子已經標記瞭，換個格子翻');
return
}
if(isInArray(x,y,leiList) != -1 ){
flag = false;
clearInterval(time);
count = 0;
passTime.innerHTML = count;
boom();
alert('你輸瞭')
}else{
testLei(x,y);
if(leiNum == sum - openGz){
flag = false;
boom();
clearInterval(time);
alert('你贏瞭');
}
}
}
}
level.onchange = function(){
var v = this.value;//獲取改變後的level
if(v == 1){//改變棋盤規格及雷的數量
row = 10;
col = 10;
leiNum = 10;
}else if(v == 2){
row = 16;
col = 16;
leiNum = 40;
}else if(v == 3){
row = 16;
col = 30;
leiNum = 99;
}
createQp();// 重新畫棋盤
};
function createQp(){// 創建棋盤
var str = '';
for(var i = 0;i<row;i++){// 行數
str += '<ul class="row">'
for(var j = 0;j<col;j++){// 列數
str+='<li class="col" data-x="'+i+'" data-y="'+j+'"></li>'
}
str += '</ul>'
}
box.style.width = col * 30 +'px';//修改box的寬度
box.style.height = row * 30 + 50 +'px';// 修改box的高度
leftLei.innerHTML = leiNum;// 修改剩餘雷數
qipan.innerHTML = str;// 將拼接的棋盤內容添加到棋盤中
count = 0;// 計時重置為0
sum = row*col;// 重置格子的總數
openGz = 0;// 重置已經點開的格子的數量
passTime.innerHTML = count; // 時間設置為count
restNum = leiNum;//重置剩餘的雷的數量
leftLei.innerHTML = restNum;
clearInterval(time);// 清除定時器
time = 0;// 定時器變量的值置為 0
createLei();
}
function countTime(){// 開始計時
time = setInterval(function(){
count++;
passTime.innerHTML = count;
},1000)
}
function createLei(){// 創建地雷
leiList = [];// 把地雷的坐標先清空
for(var i = 0;i<leiNum;i++){
var x = parseInt(Math.random()*row),//
y = parseInt(Math.random()*col);//
if(isInArray(x,y,leiList) == -1){// 如果 x,y組成的坐標[x,y] 不在leiList裡
leiList.push([x,y])// 把 [x,y] push進 leiList裡
}else{// x,y組成的坐標 [x,y] 已經在 leiList裡瞭
i-- // 重新取一次隨機坐標
}
}
}
// arr = [[0,0],[1,1],[2,2],...]
function isInArray(x,y,arr){// 判斷 x,y 組成的坐標 [x,y] 在不在數組 arr 裡
for(var i = 0;i<arr.length;i++){// 遍歷arr的每一個元素
if(x == arr[i][0] && y == arr[i][1]){// 將 x與arr[i]的第0個元素對比，將 y 與 arr[i]的第1個元素對比，如果能對上，說明 [x,y] 已經存在於 arr 裡，
return i;// 返回[x,y] 在 arr中的索引
}
}
if(i == arr.length){// 當 循環遍歷一遍也沒在arr中找到與 [x,y] 相同的坐標時，說明 [x,y] 不在arr 裡
return -1;// 返回 -1;
}
}
function boom(){// boom
var ul = $('.row','l');//獲取棋盤裡所有的行
for(var i = 0;i<leiList.length;i++){
var li = ul[leiList[i][0]].querySelectorAll('li')[leiList[i][1]];//通過索引去獲取行裡具體的li
li.style.background = 'red'
}
}
function testLei(x,y){
var num = 0; // 聲明一個num用來累計雷的數量
for(var i = 0;i<leiList.length;i++){// 遍歷所有的雷的坐標
if(Math.abs(x - leiList[i][0]) <2 && Math.abs(y - leiList[i][1])<2){// 找到在當前點擊的格子周圍八個格子裡的雷
num++;
}
}
var ul = $('.row','l');
var li = ul[x].querySelectorAll('li')[y];// 通過索引獲取當前被點擊的格子
li.innerHTML = num;// 把格子的內容換成雷的數量
li.isOpen = true;// 給當前格子加一個屬性 isOpen,表示當前格子已經被點開瞭
openGz++;
li.style.background = '#fff';
if(num>0){
li.style.color = color[num-1];// 把代表雷的數量的數字換一個顏色
}
if(num == 0){// 如果當前格子周圍沒有雷
li.innerHTML = '';//
for(var a = x-1;a<=x+1;a++){//
for(var b = y-1;b<=y+1;b++){// 遍歷當前格子周圍八個格子
var ul = $('ul','l');
if(a>= 0 && a<row && b>=0 && b<col){// 保證要遍歷的格子坐標在棋盤之內
var dom = ul[a].querySelectorAll('li')[b];// 通過坐標獲取到具體的 li
if(!dom.isOpen && !dom.isMark){// 判斷當前的li格子是否已經被點開瞭，如果還沒有被點開,遞歸查詢該格子周圍有幾顆雷
testLei(a,b)
}
}
}
}
}
}
createQp();
</script>
</body>
</html>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。