使用純javascript實現(xiàn)經(jīng)典掃雷游戲
更新時間：2015年04月23日 08:49:56 投稿：hebedich
本文給大家分享的是個人剛開始學習javascript的時候?qū)懙姆聎indows經(jīng)典的掃雷游戲的代碼，當時只是寫了下來，沒加注釋，這里補上，有需要的小伙伴可以參考下。
很久以前寫的 當時都沒寫注釋的 剛加上了 （尼瑪，好多自己都不認識了 ... ）
不足的地方就是本來想寫個游戲排名的統(tǒng)計的，等有空了再加上（好像每次都這么說 然后就等好久好久...）
還有就是沒有實現(xiàn)：點擊第一個格子不能是雷的功能
<style>
ul{padding:0;list-style:none;}
#mine{overflow:hidden;width:30px;height:30px;border:1px solid #966;}
#mine li{float:left;width:30px;height:30px;line-height:30px;text-align:center;font-size:14px;color:#222;}
#mine .mine_01{background:url(mine.gif) no-repeat;}
#mine .mine_02{background:url(mine.gif) -30px 0 no-repeat;}
#mine .mine_03{background:url(mine.gif) -60px 0 no-repeat;}
#mine .mine_04{background:url(mine.gif) -90px 0 no-repeat;}
#mine .mine_05{background:url(mine.gif) -120px 0 no-repeat;}
#mine .mine_06{background:url(mine.gif) -150px 0 no-repeat;}
#mine .mine_07{background:url(mine.gif) -180px 0 no-repeat;}
#count{font-size:12px;}
#time{color:#900;font-weight:bold;}
</style>
<select id="wh">
<option value="8*10">8*10</option>
<option value="10*10">10*10</option>
<option value="12*12">12*12</option>
</select>
<button id='ready'>重新開始</button>
<div id="count">
計時: <span id="time">0</span>
</div>
<ul id="mine">
</ul>
ie6+ ff oprea 谷歌
opera 早期版本 默認不支持document.oncontextmenu事件 沒有找到好的替代方法
<script>
var $ = function(id){return document.getElementById(id)};
window.onload=function ready(){
var V=$('wh').value.split('*')
setMineField(Number(V[0]),Number(V[1]));
$('wh').onchange=$('ready').onclick=function(){
V=$('wh').value.split('*')
setMineField(Number(V[0]),Number(V[1]))
}
}
//---------------------------------------------------雷區(qū)
var mineField={
_mineW:30, //每一個雷的寬度 必須和樣式同步
_mineH:30,
_mineFieldBlock:$('mine'),
_mineFieldEle:$('mine').getElementsByTagName('li'),
_time:$('time'),
status:0, //雷區(qū)狀態(tài) 0還沒開始 1開始了 已經(jīng)在計時了 2游戲結(jié)束了
mineNum:0, //雷數(shù)
clearPlace:0, //統(tǒng)計掃除的格子;
x:0, //列
y:0, //行
density:0.2, //雷的密度 雷區(qū)密度不宜超過0.5 在有些尺寸的雷區(qū)下 過高的設置 無法生成mineMap數(shù)組
mineMap:[], //雷區(qū)的二維圖,0 ： 不是雷 -1 ： 雷
time:-1, //計時 s
debug:false //調(diào)試模式
}//mineField object end
function timedCount(){
if(mineField.status!=1){return false}
mineField.time++;
mineField._time.innerHTML=mineField.time;
setTimeout("timedCount()",1000);
}
//--------------------------------------對雷的狀態(tài)設置
function setThisMine(str,index){
var allMine=mineField._mineFieldEle;
//設置雷是否插旗
if(str=='setOn'){
var thisMine=allMine[index];
thisMine.on=thisMine.on<2?thisMine.on+1:0;
if(thisMine.on==1){thisMine.className='mine_03';}//插旗
else if(thisMine.on==2){thisMine.className='mine_04'}//取消插旗
else if(thisMine.on==0){thisMine.className='mine_01'}//取消插旗
return false;
}
//顯示方格
if(str=='show'){
if(Object.prototype.toString.call(index) === '[object Array]'){//顯示一大片
mineField.clearPlace=mineField.clearPlace+index.length;
for(var i=0;i<index.length;i++){
var thisMine=allMine[index[i]];
thisMine.innerHTML=mineField.mineMap[thisMine.index];
thisMine.className='mine_02';
thisMine.on=3;
}
}
else{//顯示單個非雷區(qū)域
mineField.clearPlace++;
allMine[index].on=3;
allMine[index].innerHTML=mineField.mineMap[index];
allMine[index].className='mine_02';
}
if(mineField.clearPlace==mineField.x*mineField.y-mineField.mineNum){//恭喜你
alert('恭喜你');
for(var i=0;i<allMine.length;i++){
if(mineField.mineMap[allMine[i].index]==-1){
allMine[i].className='mine_07';
}
}
mineField.status=2;
return false;
}
}
//顯示全部雷
if(str=='peng'){
for(var i=0;i<allMine.length;i++){
if(mineField.mineMap[allMine[i].index]==-1){
allMine[i].className=i==index?'mine_06':'mine_05';
}
}
mineField.status=2;
}
}
//-----------------------------------------------設置行數(shù) 和 列數(shù)
function setMineField(a,b){
var thisMineFiele=mineField._mineFieldBlock;
DivBox=document.createElement("div"),
num=a*b,k=0;
thisMineFiele.innerHTML='';
//雷區(qū)參數(shù)調(diào)整
mineField.x=a;//有幾列
mineField.y=b;//有幾行
mineField.mineNum=Math.floor(a*b*mineField.density);
mineField.status=0;
mineField.time=-1;
mineField.clearPlace=0;
mineField.mineMap.length=0;
mineField._time.innerHTML=0;
//生成雷區(qū)地圖
setMineMap();
//生成雷區(qū)(創(chuàng)建li)
while(k<num){
var newLi=document.createElement("li");
if(mineField.debug) newLi.innerHTML=mineField.mineMap[k];//作弊
newLi.className='mine_01';
DivBox.appendChild(newLi);
k++;
}
thisMineFiele.style.height=mineField._mineW*b+'px';
thisMineFiele.style.width=mineField._mineH*a+'px';
thisMineFiele.innerHTML=DivBox.innerHTML;
DivBox=null;
setEvent();//事件
}
//-----------------------------------生成雷區(qū)地圖
function setMineMap(){
var num=mineField.x*mineField.y,
mineNum=mineField.mineNum,
Interval=Math.floor(num/mineNum);
for(var i=0;i<num;i++){
if(i%Interval==0&&i<mineNum*Interval){mineField.mineMap[i]=-1;}else{mineField.mineMap[i]=0;}//雷等距離分布與數(shù)組中
}
mineField.mineMap.sort(function(){ return 0.5 - Math.random()})//打亂數(shù)組
//判斷方格周圍是否都是雷 如果是的話 要重新生成雷區(qū) 從而避免成片雷區(qū)的存在
var br=0,//所在行
x=mineField.x,
L_T,T,R_T,L,R,L_B,B,R_B;
for(var i=0;i<num;i++){
br=Math.ceil((i+1)/x);
L_T = i-x-1;
T = i-x;
R_T = i-x+1;
L = i-1;
R = i+1;
L_B = i+x-1;
B = i+x;
R_B = i+x+1;
//坐上角 如果在雷區(qū) 并且是在上一行 并且他不是雷 就進行下一方格檢測
if(L_T>=0&&Math.ceil((L_T+1)/x)==br-1&&mineField.mineMap[L_T]==0){continue}
if(T >=0&&Math.ceil((T +1)/x)==br-1&&mineField.mineMap[T ]==0){continue}
if(R_T>=0&&Math.ceil((R_T+1)/x)==br-1&&mineField.mineMap[R_T]==0){continue}
if(L>=0 &&Math.ceil((L+1)/x)==br&&mineField.mineMap[L]==0){continue}
if(R<num&&Math.ceil((R+1)/x)==br&&mineField.mineMap[R]==0){continue}
if(L_B<num&&Math.ceil((L_B+1)/x)==br+1&&mineField.mineMap[L_B]==0){continue}
if(B <num&&Math.ceil((B +1)/x)==br+1&&mineField.mineMap[B ]==0){continue}
if(R_B<num&&Math.ceil((R_B+1)/x)==br+1&&mineField.mineMap[R_B]==0){continue}
setMineMap();
return false
}
//統(tǒng)計非雷方格周圍的雷數(shù)
for(i=0;i<num;i++){
if(mineField.mineMap[i]==-1){continue}
var thisMineNum=0
br=Math.ceil((i+1)/x);
L_T = i-x-1;
T = i-x;
R_T = i-x+1;
L = i-1;
R = i+1;
L_B = i+x-1;
B = i+x;
R_B = i+x+1;
if(L_T>=0&&Math.ceil((L_T+1)/x)==br-1&&mineField.mineMap[L_T]==-1){thisMineNum++;}
if(T >=0&&Math.ceil((T +1)/x)==br-1&&mineField.mineMap[T ]==-1){thisMineNum++;}
if(R_T>=0&&Math.ceil((R_T+1)/x)==br-1&&mineField.mineMap[R_T]==-1){thisMineNum++;}
if(L>=0 &&Math.ceil((L+1)/x)==br&&mineField.mineMap[L]==-1){thisMineNum++;}
if(R<num&&Math.ceil((R+1)/x)==br&&mineField.mineMap[R]==-1){thisMineNum++;}
if(L_B<num&&Math.ceil((L_B+1)/x)==br+1&&mineField.mineMap[L_B]==-1){thisMineNum++;}
if(B <num&&Math.ceil((B +1)/x)==br+1&&mineField.mineMap[B ]==-1){thisMineNum++;}
if(R_B<num&&Math.ceil((R_B+1)/x)==br+1&&mineField.mineMap[R_B]==-1){thisMineNum++;}
mineField.mineMap[i]=thisMineNum;
}
}
//----------------------------------雷區(qū)事件
function setEvent(){
var thisMineFiele=mineField._mineFieldBlock,
allMine=mineField._mineFieldEle,
iMax=mineField.x*mineField.y;
for(var i=0;i<iMax;i++){
allMine[i].index=i;
allMine[i].on=0;//0為默認 1為插旗 2為問號 3為顯示
}
thisMineFiele.onmouseup=function(e){
if(mineField.status==2){return false;}
if(mineField.status==0){mineField.status=1;timedCount();}
var e=e||window.event,
thisObj=e.target||e.srcElement;
if(thisObj.nodeName=='UL'||thisObj.on==3){return false;}
var Btn=getButton(e);
if(Btn== 0){//左鍵
if(thisObj.on==1){return false;}//插旗子了 就不能點了
if(mineField.mineMap[thisObj.index]==-1){//點雷了
setThisMine('peng',thisObj.index);
}else if(mineField.mineMap[thisObj.index]==0){//點到空地了 打開一大片
//alert('你運氣真好')
var allShowMine=minesShow(thisObj.index);
setThisMine('show',allShowMine)
}else{//顯示一個格子
setThisMine('show',thisObj.index)
}
}
if(Btn== 2){//右鍵
setThisMine('setOn',thisObj.index);
}
}
}
//--------------------------------按到空格時 顯示一大片
function minesShow(I){
var allMine=mineField._mineFieldEle,
allShowMine=[I];//保存要顯示的雷的下標
allMine[I].on=3;
see(I);//查詢下標為I的周圍的方格
function see(allI){
var _allI=[];
if(Object.prototype.toString.call(allI) === '[object Array]'){
for(var i=0;i<allI.length;i++){f(allI[i])}
}
else{f(allI)}
function f(thisI){
var text,
x=mineField.x,
br,
num=x*mineField.y,
L_T,T,R_T,L,R,L_B,B,R_B;
text='_'+allShowMine.join('_')+'_';//用來判斷下標是否已經(jīng)寫入數(shù)組
br=Math.ceil((thisI+1)/x);
L_T = thisI-x-1;
T = thisI-x;
R_T = thisI-x+1;
L = thisI-1;
R = thisI+1;
L_B = thisI+x-1;
B = thisI+x;
R_B = thisI+x+1;
//左上角的方格 如果是在雷區(qū) 又是在上一行 又是沒翻開的格子 又是空格 那么就寫如_allI數(shù)組 來進行下一次檢索
if(L_T>=0&&Math.ceil((L_T+1)/x)==br-1&&allMine[L_T].on==0&&mineField.mineMap[L_T] == 0){_allI.push(L_T);}
if(T >=0&&Math.ceil((T +1)/x)==br-1&&allMine[T ].on==0&&mineField.mineMap[T ] == 0){_allI.push(T);}
if(R_T>=0&&Math.ceil((R_T+1)/x)==br-1&&allMine[R_T].on==0&&mineField.mineMap[R_T] == 0){_allI.push(R_T);}
if(L>=0&&Math.ceil((L+1)/x)==br&&allMine[L].on==0&&mineField.mineMap[L] == 0){_allI.push(L);}
if(R<num&&Math.ceil((R+1)/x)==br&&allMine[R].on==0&&mineField.mineMap[R] == 0){_allI.push(R);}
if(L_B<num&&Math.ceil((L_B+1)/x)==br+1&&allMine[L_B].on==0&&mineField.mineMap[L_B] == 0){_allI.push(L_B);}
if(B <num&&Math.ceil((B +1)/x)==br+1&&allMine[B ].on==0&&mineField.mineMap[B ] == 0){_allI.push(B);}
if(R_B<num&&Math.ceil((R_B+1)/x)==br+1&&allMine[R_B].on==0&&mineField.mineMap[R_B] == 0){_allI.push(R_B);}
//------------------------------------------------
//左上角的的格子 如果在雷區(qū) 又是在上一行 又是沒翻開的格子 又是沒寫入allShowMine數(shù)組的 那就寫入吧 并提前標記為翻開的格子
if(L_T>=0&&Math.ceil((L_T+1)/x)==br-1&&allMine[L_T].on==0&&text.indexOf('_'+L_T+'_') == -1){allShowMine.push(L_T);allMine[L_T].on=3}
if(T >=0&&Math.ceil((T +1)/x)==br-1&&allMine[T ].on==0&&text.indexOf('_'+T+'_') == -1){allShowMine.push(T);allMine[T].on=3}
if(R_T>=0&&Math.ceil((R_T+1)/x)==br-1&&allMine[R_T].on==0&&text.indexOf('_'+R_T+'_') == -1){allShowMine.push(R_T);allMine[R_T].on=3}
if(L>=0&&Math.ceil((L+1)/x)==br&&allMine[L].on==0&&text.indexOf('_'+L+'_') == -1){allShowMine.push(L);allMine[L].on=3}
if(R<num&&Math.ceil((R+1)/x)==br&&allMine[R].on==0&&text.indexOf('_'+R+'_') == -1){allShowMine.push(R);allMine[R].on=3}
if(L_B<num&&Math.ceil((L_B+1)/x)==br+1&&allMine[L_B].on==0&&text.indexOf('_'+L_B+'_') == -1){allShowMine.push(L_B);allMine[L_B].on=3}
if(B <num&&Math.ceil((B +1)/x)==br+1&&allMine[B ].on==0&&text.indexOf('_'+B+'_') == -1){allShowMine.push(B );allMine[B ].on=3}
if(R_B<num&&Math.ceil((R_B+1)/x)==br+1&&allMine[R_B].on==0&&text.indexOf('_'+R_B+'_') == -1){allShowMine.push(R_B);allMine[R_B].on=3}
if(_allI.length!=0){see(_allI)}
}
}
return allShowMine
}
//--------------------------------------
document.oncontextmenu=function(){return false;}//禁止右鍵菜單
function getButton(e){
var Btn;
if(document.implementation.hasFeature('MouseEvents','2.0')){Btn=e.button;}
else{ switch(e.button){
case 0:
case 1:
case 3:
case 5:
case 7:
Btn=0;
break;
case 2:
case 6:
Btn=2;
break;
case 4:
Btn=9;
break;
}
}
return Btn;
}
</script>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)石頭剪刀布游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家分享了一個看字說顏色的小游戲，游戲是利用JS語言編寫實現(xiàn)的，文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下2022-04-04
一個可以計算當月水電氣多少錢的計算器 說明:輸入各項后,在頁面任意空白處點擊鼠標,頁面自動計算一次結(jié)果!，每項都必須填寫，填0也可以2008-04-04
這篇文章主要介紹了JS+CSS實現(xiàn)可拖動的彈出提示框,涉及針對鼠標事件及html元素的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
js實現(xiàn)帶農(nóng)歷和八字等信息的日歷特效
本文主要介紹了js實現(xiàn)帶農(nóng)歷和八字等信息的日歷特效,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
刷新禁止用F5鍵刷新禁止右鍵這些在某些特殊情況下還是比較實用的，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
js之如何刪除多層數(shù)組嵌套的最后一層中的部分數(shù)據(jù)
這篇文章主要介紹了js之如何刪除多層數(shù)組嵌套的最后一層中的部分數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在基于Electron的應用中,有一個業(yè)務需求是獲取物理網(wǎng)卡的Mac地址以用于客戶機唯一性識別,本文主要介紹了electron中獲取mac地址的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
解決火狐瀏覽器下JS setTimeout函數(shù)不兼容失效不執(zhí)行的方法
今天檢查自己用JQuery+AJAX+PHP做的網(wǎng)站后臺登錄檢測，愛其他瀏覽器中兼容性還不錯 結(jié)果到了火狐（FireFox）瀏覽器下setTimeout這個JS內(nèi)置函數(shù)不執(zhí)行了，本文將提供詳細的解決方法2012-11-11
JS實現(xiàn)頁面跳轉(zhuǎn)鏈接的幾種方式匯總
這篇文章主要介紹了JS實現(xiàn)頁面跳轉(zhuǎn)鏈接的幾種方式,簡單總結(jié)了幾種頁面跳轉(zhuǎn)功能的實現(xiàn),有使用js跳轉(zhuǎn)頁面,返回上一次預覽界面及button按鈕添加事件跳轉(zhuǎn),本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-01-01