代碼其實很簡單，這里就不多廢話了
<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>以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
