JavaScript制作windows經典掃雷小游戲

2024-05-06 16:17:55

字體：大中小

來源：轉載

供稿：網友

掃雷是一款相當大眾的小游戲,游戲目標是在最短的時間內根據點擊格子出現的數字找出所有非雷格子,同時避免踩雷。今天我們來看看如何使用javascript來實現這款小游戲

代碼其實很簡單，這里就不多廢話了

<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,//作為雙鍵單擊的計數，mouseup事件置0，mousedown事件＋1，當MouseButton=2說明雙鍵同時單擊;鼠標左鍵是否按下，當鼠標左鍵按下時為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,//最大的坐標

MineCount:10,//定義雷的個數,可改

FlagCount:0, //已經標記的旗子的數量

OpenedCount:0, //已經打開的地區的數量

MaxOpenCount:0,//應該要打開的最大地區數量

//當OpenedCount=MaxOpenCount&&FlagCount=MineCount的時候,判斷游戲成功結束

Mine:[],

GameOver:false, //true代表游戲失敗結束

Success:false, //true代表游戲成功結束

aClear:[],//臨時開雷的數組

//刷新網頁的時候初始化

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表示右鍵標記

MineCount:0//周圍有幾個雷

}

}

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;

},

//為了方便循環賦值,給表格數組賦值的時候是XY倒過來循環的,所以調用的時候要倒回去

//比如要獲得該格子是否有雷,用OMine.fGetMine(x,y).Mine;

fGetMine:function(X,Y){return this.Mine[Y][X]},

//僅當按重新開始的按鈕，不初始化大表格字符

fRefreshMap:function(){

var T=this;

$('dMap').innerHTML=T.InitStr;

T.fResetOMine();//必須先重置OMine,再重置99個雷

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數組

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;

}

},

//初始化雷的數組

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; //一個隨機數字

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;

}

},

//鼠標移動到某格子的時候

fButtonMouseOver:function(X,Y){

var T=this;

switch(MouseButton){

case 2://雙鍵按下的狀態

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); //左鍵是按下的

}

},

//鼠標移出某格子的時候

fButtonMouseOut:function(X,Y){

var T=this;

switch(MouseButton){

case 2://雙鍵按下的狀態

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); //左鍵是按下的

}

},

//鼠標按下時沒被開啟的格子呈現被按下

fButtonDown:function(X,Y){

var srcEle=$('Img'+X+'_'+Y);

srcEle.className=='Normal'&&(srcEle.className='M0');

},

//讓沒被開啟并且已經呈現被按下的格子回復Normal

fButtonUp:function(X,Y){

var srcEle=$('Img'+X+'_'+Y);

srcEle.className=='M0'&&!this.fGetMine(X,Y).State&&(srcEle.className='Normal');

},

//獲取8個方向的坐標

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;

},

//鼠標在格子按下

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;

}

}

}

},

//鼠標在格子彈起

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為兩個鍵都單擊按下，任意一個鍵彈起都判斷為雙鍵彈起

LeftMouse=0;

//鼠標彈起，把呈現被按下狀態的格子恢復

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: //當MouseDown為一個鍵單擊時，MouseUp才判斷為一個鍵彈起

if(WhichButton(evt)){

//只有在State=0才起作用,跟是否有雷沒關系

LeftMouse=0;

if(ObXY.State){break;}

ObXY.Mine?(

//觸雷,結束該局

T.fFail(),

srcEle.className='Boom'

):(

ObXY.State=1, //壓棧之前就要設置為已經開啟

T.aClear.push([X,Y]),

T.fClearMine()

)

}

}

MouseButton=0;

if(T.OpenedCount==T.MaxOpenCount&&T.FlagCount==T.MineCount){

T.fSuccess();

alert('恭喜游戲成功!再來一局吧？');

return;

}

//當剩余未開啟的格子數＝剩余的旗子數，自動完成

T.MaxOpenCount+T.MineCount-T.OpenedCount-T.FlagCount==$('txtFlagCount').value&&(

T.fSuccess(),

T.fAutoFlag(),

alert('恭喜游戲成功!再來一局吧？')

)

},

//自動填充未開啟的地區的雷

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=[], //一個臨時數組

srcEle=$('Img'+X+'_'+Y),

ObXY,ObTXTY,

countMine=0, //獲取周圍雷的個數

//從正左開始的8個方向

arr=T.fGetAround(X,Y),i=arr.length,TAr;

while(i--){

//TX,TY獲得本格周圍的坐標

(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獲得本格周圍的坐標

ObTXTY=T.fGetMine(TX=(TAr=arr[i])[0],TY=TAr[1]);

switch(ObTXTY.State){

case 0: //未開啟未標記

!ObTXTY.Mine&&aTmpClear.push([TX,TY]); //沒雷也沒旗子的時候加入到被輔助開啟的數組}

break;

case 2: //標記了旗子

++FlagCount; //只要標記了旗子,無論對錯,都記錄標記數+1

!ObTXTY.Mine&&(FlagErr=true); //沒有雷但是標記了旗子,標記錯誤

}

}

if(FlagCount<T.fGetMine(X,Y).MineCount||aTmpClear.length==0)return;

//旗子比實際雷少,無論標記對錯,不開啟

//沒有可以提供開啟的空格

if(FlagErr){ //有錯誤則進行結束游戲處理

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';

}

}

}

},

//游戲成功結束

fSuccess:function(){

this.Success=true;

$('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/success.gif';

},

//游戲失敗結束

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>