JavaScript制作windows經(jīng)典掃雷小游戲
更新時(shí)間：2015年03月31日 10:55:09 投稿：hebedich
掃雷是一款相當(dāng)大眾的小游戲,游戲目標(biāo)是在最短的時(shí)間內(nèi)根據(jù)點(diǎn)擊格子出現(xiàn)的數(shù)字找出所有非雷格子,同時(shí)避免踩雷。今天我們來看看如何使用javascript來實(shí)現(xiàn)這款小游戲
代碼其實(shí)很簡單，這里就不多廢話了
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>掃雷-JavaScript Mine Sweeper</title>
<style type="text/css">
table{TABLE-LAYOUT: fixed;cursor:pointer}
td{width: 20px; height: 20px; font-size: 12px; font-family: Verdana;font-weight:bold; text-align:center;background:#CECECE;}
td.Normal, .Flag{border-left:2px solid #F5F5F5; border-right:2px outset #F5F5F5; border-top:2px solid #F5F5F5; border-bottom:2px outset #F5F5F5; font-weight:bold}
.Mine, .Boom, .M0, .M1, .M2, .M3, .M4, .M5, .M6, .M7, .M8{background:#C5C5C5;border-right:1px solid #B4B4B4; border-bottom:1px solid #B4B4B4;}
td.Mine{background: url(http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/mine.gif) no-repeat center}
td.Boom{background:#F00 url(http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/mine.gif) no-repeat center}
td.Flag, td.ErrFlag{background-image: url(http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/flag.gif);background-repeat: no-repeat; background-position: center;}
td.ErrFlag{background:#0F0}
td.M1 {color: #00f}
td.M2 {color: #008000}
td.M3 {color: #f00}
td.M4 {color: #000080}
td.M5 {color: #800000}
td.M6 {color: #008080}
td.M7 {color: #000}
td.M8 {color: #808080}
</style>
<script>
var $=function(id){return document.getElementById(id)},
MouseButton=LeftMouse=0,//作為雙鍵單擊的計(jì)數(shù)，mouseup事件置0，mousedown事件＋1，當(dāng)MouseButton=2說明雙鍵同時(shí)單擊;鼠標(biāo)左鍵是否按下，當(dāng)鼠標(biāo)左鍵按下時(shí)為1，松開為0
FlagImg=new Image(),
HappyImg=new Image(),
MineImg=new Image(),
SadImg=new Image(),
SuccessImg=new Image(),
WhichButton=function(e){
e=e||window.event;
var b=getOs();
if(b!=2){ //非FF
switch(e.button){
case 2:
return 0;
case 0:
return b==1?0:1; //b==1,IE
default:
return 1;
}
}else{ //FF
return e.which==3?0:1;
}
},
OMine={
MaxX:9,MaxY:9,//最大的坐標(biāo)
MineCount:10,//定義雷的個(gè)數(shù),可改
FlagCount:0, //已經(jīng)標(biāo)記的旗子的數(shù)量
OpenedCount:0, //已經(jīng)打開的地區(qū)的數(shù)量
MaxOpenCount:0,//應(yīng)該要打開的最大地區(qū)數(shù)量
//當(dāng)OpenedCount=MaxOpenCount&&FlagCount=MineCount的時(shí)候,判斷游戲成功結(jié)束
Mine:[],
GameOver:false, //true代表游戲失敗結(jié)束
Success:false, //true代表游戲成功結(jié)束
aClear:[],//臨時(shí)開雷的數(shù)組
//刷新網(wǎng)頁的時(shí)候初始化
fInit:function(){
var T=this,MaxX=T.MaxX,MaxY=T.MaxY,nX,nY=MaxY,MineCount=T.MineCount,
AStr=['<table bordercolor="#000000" border="0" cellpadding="0" cellspacing="0" height="'+20*MaxY+'px" width="'+20*MaxX+'px" style="border: 10px inset #a0a0a0">'],
i=0,TAr,TMine=T.Mine;
T.MaxOpenCount=MaxX*MaxY-MineCount;
while(nY--){
AStr[++i]='<tr>';
TAr=TMine[nY]=[];
nX=MaxX;
while(nX--){
AStr[++i]='<td class="Normal" onmousedown="OMine.fMouseDown('+nX+','+nY+',event);" onmouseup="OMine.fMouseUp('+nX+','+nY+',event);" onmouseover="OMine.fButtonMouseOver('+nX+','+nY+')" onmouseout="OMine.fButtonMouseOut('+nX+','+nY+')" id="Img'+nX+'_'+nY+'"> </td>';
TAr[nX]={
Mine:0, //0表示沒有雷,1表示有雷
State:0,//0表示未開啟,1表示左鍵開啟,2表示右鍵標(biāo)記
MineCount:0//周圍有幾個(gè)雷
}
}
AStr[++i]='</tr>';
}
AStr[++i]='</table>';
$('dMap').innerHTML=T.InitStr=AStr.join('');
$('txtFlagCount').value=MineCount;
T.fInitMine();
$('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/happy.gif';
T.GameOver=T.Success=false;
T.OpenedCount=T.FlagCount=T.aClear.lenght=0;
},
//為了方便循環(huán)賦值,給表格數(shù)組賦值的時(shí)候是XY倒過來循環(huán)的,所以調(diào)用的時(shí)候要倒回去
//比如要獲得該格子是否有雷,用OMine.fGetMine(x,y).Mine;
fGetMine:function(X,Y){return this.Mine[Y][X]},
//僅當(dāng)按重新開始的按鈕，不初始化大表格字符
fRefreshMap:function(){
var T=this;
$('dMap').innerHTML=T.InitStr;
T.fResetOMine();//必須先重置OMine,再重置99個(gè)雷
T.fInitMine();
T.GameOver=T.Success=false;
$('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/happy.gif';
$('txtFlagCount').value=T.MineCount;
T.OpenedCount=T.FlagCount=T.aClear.lenght=0;
},
//重置OMine.Mine數(shù)組
fResetOMine:function(){
var T=this,MaxY=T.MaxY,MaxX=T.MaxX,X,Y=MaxY,M,Mine=T.Mine,TAr;
while(Y--){
X=MaxX;
TAr=Mine[Y];
while(X--)(M=TAr[X]).Mine=M.State=M.MineCount=0;
}
},
//初始化雷的數(shù)組
fInitMine:function(){
var T=this,MaxX=T.MaxX,MaxY=T.MaxY,a,fGetMine=T.fGetMine,
aOld=[],x,y=MaxY,n=0,l=T.MineCount,xRand; //一個(gè)隨機(jī)數(shù)字
while(y--){
x=MaxX;
while(x--)aOld[n++]=[x,y];
}
while(l--){
a=aOld[xRand=Math.floor(Math.random()*(n-1))];
T.fGetMine(a[0],a[1]).Mine=1;
aOld.splice(xRand,1);
--n;
}
},
//鼠標(biāo)移動(dòng)到某格子的時(shí)候
fButtonMouseOver:function(X,Y){
var T=this;
switch(MouseButton){
case 2://雙鍵按下的狀態(tài)
var arr=T.fGetAround(X,Y),i=arr.length,TAr;
while(i--)T.fButtonDown((TAr=arr[i])[0],TAr[1]);
case 1:
LeftMouse==1&&T.fButtonDown(X,Y); //左鍵是按下的
}
},
//鼠標(biāo)移出某格子的時(shí)候
fButtonMouseOut:function(X,Y){
var T=this;
switch(MouseButton){
case 2://雙鍵按下的狀態(tài)
var arr=T.fGetAround(X,Y),i=arr.length,TAr;
while(i--)T.fButtonUp((TAr=arr[i])[0],TAr[1]);
case 1:
LeftMouse==1&&T.fButtonUp(X,Y); //左鍵是按下的
}
},
//鼠標(biāo)按下時(shí)沒被開啟的格子呈現(xiàn)被按下
fButtonDown:function(X,Y){
var srcEle=$('Img'+X+'_'+Y);
srcEle.className=='Normal'&&(srcEle.className='M0');
},
//讓沒被開啟并且已經(jīng)呈現(xiàn)被按下的格子回復(fù)Normal
fButtonUp:function(X,Y){
var srcEle=$('Img'+X+'_'+Y);
srcEle.className=='M0'&&!this.fGetMine(X,Y).State&&(srcEle.className='Normal');
},
//獲取8個(gè)方向的坐標(biāo)
fGetAround:function(X,Y){
var TX,TY,i=8,MX=this.MaxX-1,MY=this.MaxY-1,
Arr=[[-1,0],[-1,-1],[0,-1],[1,-1],[1,0],[1,1],[0,1],[-1,1]],
newArr=[],TAr;
while(i--){
TX=X+(TAr=Arr[i])[0];
TY=Y+TAr[1];
!(TX<0||TX>MX||TY<0||TY>MY)&&newArr.push([TX,TY]);
}
return newArr;
},
//鼠標(biāo)在格子按下
fMouseDown:function(X,Y,evt){
var T=this;
if(T.GameOver){
alert('游戲失敗,再接再厲!');
return;
}
if(T.Success){
alert('恭喜游戲成功!再來一局吧？');
return;
}
var srcEle=$('Img'+X+'_'+Y),ObXY=T.fGetMine(X,Y),arr,i,TAr;
++MouseButton;
evt=evt||window.event;
switch(MouseButton){
case 2:
arr=T.fGetAround(X,Y);i=arr.length;
while(i--)T.fButtonDown((TAr=arr[i])[0],TAr[1]);
break;
case 1:
if(WhichButton(evt)){
LeftMouse=1;
T.fButtonDown(X,Y);
}else{
switch(ObXY.State){
case 0:
ObXY.State=2;
srcEle.className='Flag';
--$('txtFlagCount').value;
++T.FlagCount;
break;
case 2:
ObXY.State=0;
srcEle.className='Normal';
++$('txtFlagCount').value;
--T.FlagCount;
}
}
}
},
//鼠標(biāo)在格子彈起
fMouseUp:function(X,Y,evt){
var T=this;
evt=evt||window.event;
var srcEle=$('Img'+X+'_'+Y),ObXY=T.fGetMine(X,Y),arr,i,TAr;
switch(MouseButton){
case 2: //MouseDown為兩個(gè)鍵都單擊按下，任意一個(gè)鍵彈起都判斷為雙鍵彈起
LeftMouse=0;
//鼠標(biāo)彈起，把呈現(xiàn)被按下狀態(tài)的格子恢復(fù)
arr=T.fGetAround(X,Y);i=arr.length;
while(i--)T.fButtonUp((TAr=arr[i])[0],TAr[1]);
!ObXY.State&&T.fButtonUp(X,Y);
ObXY.State==1&&ObXY.MineCount&&T.fOpenFlagMine(X,Y);
break;
case 1: //當(dāng)MouseDown為一個(gè)鍵單擊時(shí)，MouseUp才判斷為一個(gè)鍵彈起
if(WhichButton(evt)){
//只有在State=0才起作用,跟是否有雷沒關(guān)系
LeftMouse=0;
if(ObXY.State){break;}
ObXY.Mine?(
//觸雷,結(jié)束該局
T.fFail(),
srcEle.className='Boom'
):(
ObXY.State=1, //壓棧之前就要設(shè)置為已經(jīng)開啟
T.aClear.push([X,Y]),
T.fClearMine()
)
}
}
MouseButton=0;
if(T.OpenedCount==T.MaxOpenCount&&T.FlagCount==T.MineCount){
T.fSuccess();
alert('恭喜游戲成功!再來一局吧？');
return;
}
//當(dāng)剩余未開啟的格子數(shù)＝剩余的旗子數(shù)，自動(dòng)完成
T.MaxOpenCount+T.MineCount-T.OpenedCount-T.FlagCount==$('txtFlagCount').value&&(
T.fSuccess(),
T.fAutoFlag(),
alert('恭喜游戲成功!再來一局吧？')
)
},
//自動(dòng)填充未開啟的地區(qū)的雷
fAutoFlag:function(){
var T=this,nX,nY=T.MaxY,MaxX=T.MaxX,Mine=T.Mine,TAr;
while(nY--){
nX=MaxX;
TAr=Mine[nY];
while(nX--)!TAr[nX].State&&($('Img'+nX+'_'+nY).className='Flag');
}
$('txtFlagCount').value=0;
},
//遞歸開雷
fClearMine:function(){
var T=this;
if(T.aClear.length==0){return}
++T.OpenedCount;
var aXY=T.aClear.pop(),X=aXY[0],Y=aXY[1],TX,TY,
aTmpClear=[], //一個(gè)臨時(shí)數(shù)組
srcEle=$('Img'+X+'_'+Y),
ObXY,ObTXTY,
countMine=0, //獲取周圍雷的個(gè)數(shù)
//從正左開始的8個(gè)方向
arr=T.fGetAround(X,Y),i=arr.length,TAr;
while(i--){
//TX,TY獲得本格周圍的坐標(biāo)
(ObTXTY=T.fGetMine(TX=(TAr=arr[i])[0],TY=TAr[1])).Mine==1&&++countMine;
!ObTXTY.State&&aTmpClear.push([TX,TY]);
}
ObXY=T.fGetMine(X,Y);
ObXY.MineCount=countMine;
srcEle.className='M'+countMine;
if(!countMine){
Array.prototype.push.apply(T.aClear,aTmpClear);
i=aTmpClear.length;
while(i--)T.fGetMine((TAr=aTmpClear[i])[0],TAr[1]).State=1;
}else{
getOs()==2?
srcEle.textContent=countMine
:srcEle.innerText=countMine
}
T.fClearMine();
},
//獲得雙鍵輔助開啟
fOpenFlagMine:function(X,Y){
var T=this,FlagCount=0,TX,TY,ObXY,ObTXTY,aTmpClear=[],FlagErr=false,
arr=T.fGetAround(X,Y),i=arr.length,TAr;
while(i--){
//TX,TY獲得本格周圍的坐標(biāo)
ObTXTY=T.fGetMine(TX=(TAr=arr[i])[0],TY=TAr[1]);
switch(ObTXTY.State){
case 0: //未開啟未標(biāo)記
!ObTXTY.Mine&&aTmpClear.push([TX,TY]); //沒雷也沒旗子的時(shí)候加入到被輔助開啟的數(shù)組}
break;
case 2: //標(biāo)記了旗子
++FlagCount; //只要標(biāo)記了旗子,無論對錯(cuò),都記錄標(biāo)記數(shù)+1
!ObTXTY.Mine&&(FlagErr=true); //沒有雷但是標(biāo)記了旗子,標(biāo)記錯(cuò)誤
}
}
if(FlagCount<T.fGetMine(X,Y).MineCount||aTmpClear.length==0)return;
//旗子比實(shí)際雷少,無論標(biāo)記對錯(cuò),不開啟
//沒有可以提供開啟的空格
if(FlagErr){ //有錯(cuò)誤則進(jìn)行結(jié)束游戲處理
T.fFail();
return;
}
Array.prototype.push.apply(T.aClear,aTmpClear);
i=aTmpClear.length;
while(i--)T.fGetMine((TAr=aTmpClear[i])[0],TAr[1]).State=1;
T.fClearMine();
},
//顯示所有的雷
fShowMine:function(){
var T=this,X=0,Y=T.MaxY,MaxX=T.MaxX,Mine=T.Mine,TAr,TArX;
while(Y--){
X=MaxX;
TAr=Mine[Y];
while(X--){
TArX=TAr[X];
switch(TArX.Mine){
case 0:
TArX.State==2&&($('Img'+X+'_'+Y).className='ErrFlag');
break;
case 1:
$('Img'+X+'_'+Y).className='Mine';
}
}
}
},
//游戲成功結(jié)束
fSuccess:function(){
this.Success=true;
$('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/success.gif';
},
//游戲失敗結(jié)束
fFail:function(){
this.GameOver=true;
$('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/sad.gif';
this.fShowMine();
}
},
//換地圖
ChangeMap=function(Map){
var O=OMine;
switch(Map){
case 1:
O.MaxX=O.MaxY=9;
O.MineCount=10;
break;
case 2:
O.MaxX=O.MaxY=16;
O.MineCount=40;
break;
case 3:
O.MaxX=30;
O.MaxY=16;
O.MineCount=99;
}
O.fInit();
},
getOs=function(){
if(navigator.userAgent.indexOf("MSIE")>0)return 1;
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return 2;
if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 3;
if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 4;
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 5;
return 0;
};
FlagImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/flag.gif';
HappyImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/happy.gif';
MineImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/mine.gif';
SadImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/sad.gif';
SuccessImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/success.gif';
</script>
</head>
<body topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onload="OMine.fInit()" bgcolor="#808080">
<center>
<div id="dTop" align="center" style="border-style: inset; border-width: 10;width:400">
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="380" height="44">
<tr>
<td style="width: 102; height:50px">
<input type="text" id="txtFlagCount" size="20" style="width: 60; height: 30; color:#FF0000; text-align:center; font-family:Verdana; font-weight:bold; background-color:#000000; font-size:13pt" value=""></td>
<td style="width: 136; height:50px">
<input onclick="OMine.fRefreshMap()" type="image" id="btnRefreshMap" src="happy.gif"><input onclick="OMine.fShowMine();" type="button" name="B3" value="顯雷"style="display:none"></td>
<td style="width: 142; height:50px">
<input type="radio" value="V1" checked name="R1" id="R1" onclick="ChangeMap(1)">初級<input type="radio" value="V1" name="R1" id="R2" onclick="ChangeMap(2)">中級<input type="radio" value="V1" name="R1" id="R3" onclick="ChangeMap(3)">高級</td>
</tr>
</table>
</div>
<div id="dMap" align="center"></div>
</center>
</body>
</html>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了JavaScript獲得表單target屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
audio是音頻組件,用于播放一個(gè)基于http協(xié)議的音頻資源,這篇文章主要給大家介紹了關(guān)于微信小程序audio組件在ios端無法播放的解決辦法,需要的朋友可以參考下2021-07-07
如何基于layui的laytpl實(shí)現(xiàn)數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了如何基于layui的laytpl實(shí)現(xiàn)數(shù)據(jù)綁定的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
利用Three.js如何實(shí)現(xiàn)陰影效果實(shí)例代碼
使用three.js可以方便的讓我們在網(wǎng)頁中做出各種不同的3D效果，下面這篇文章主要給大家介紹了關(guān)于利用Three.js如何實(shí)現(xiàn)陰影效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)控制文本框的內(nèi)容。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了微信小程序獲取網(wǎng)絡(luò)類型的方法,結(jié)合完整實(shí)例形式分析了微信小程序通過wx.getNetworkType獲取網(wǎng)絡(luò)類型的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序時(shí)間選擇插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript 就地編輯HTML節(jié)點(diǎn)實(shí)現(xiàn)代碼
JavaScript 就地編輯HTML節(jié)點(diǎn)實(shí)現(xiàn)代碼2009-07-07
javascript 中按屬性值查找數(shù)組中的對象多種方法
JavaScript 數(shù)組可以保存混合類型的不同值，例如字符串、空值或布爾值，并且不需要數(shù)組的大小來指定它在哪里自動(dòng)增長和動(dòng)態(tài)，這篇文章主要介紹了javascript 中按屬性值查找數(shù)組中的對象多種方法,需要的朋友可以參考下2023-06-06
javascript定時(shí)器取消定時(shí)器及優(yōu)化方法
這篇文章主要介紹了 javascript定時(shí)器取消定時(shí)器及js定時(shí)器優(yōu)化方法的相關(guān)資料,需要的朋友可以參考下2017-07-07