JavaScript版經典游戲之掃雷游戲完整示例【附demo源碼下載】
編輯：關於JavaScript
本文實例講述了JavaScript掃雷游戲。分享給大家供大家參考，具體如下：
翻出年初寫的游戲貼上來，掃雷相信大家都玩過，先上圖：
源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript版掃雷</title>
<style>
input{ margin:0; padding:0;}
input{ outline:none;}
#game_box{ width:400px; height:430px; margin:100px auto; border:#333 1px solid; background:#ccc -webkit-repeating-linear-gradient(top,#ccc,#000);background:#ccc -moz-repeating-linear-gradient(top,#ccc,#000);background:#ccc -o-repeating-linear-gradient(top,#ccc,#000);background:#ccc -ms-repeating-linear-gradient(top,#ccc,#000); box-shadow:0 0 50px 10px #333; box-shadow:0 0 50px 10px #333;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CBCBCB', endColorstr='#000000');
}
#map{width:400px; height:348px;*height:380px;}
#time{ height:18px; line-height:22px; text-align:center;margin:6px 0; margin-top:10px; _margin-top:40px; color:#fff; position:relative;}
#time input{ width:40px; height:18px; line-height:18px; text-align:center;}
#table_map{ width:336px; height:336px; border:none; border-left:#000 1px solid;border-top:#000 1px solid; margin:32px 32px 0px 32px; background:#D8ECF6; text-align:center; border-collapse: collapse}
#table_map td{ width:20px; height:20px; border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; color:#333333; transition:all 0.7s; cursor:pointer;}
#table_map td.mask{ border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; background:#333; }
#table_map td.over{ border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; }
.over_bg{ background:#E1E1E1;}
@-webkit-keyframes round{
from{ -webkit-transform:rotateX(0);}
to{ -webkit-transform:rotateX(360deg);}
}
@-webkit-keyframes show{
from{ -webkit-transform:rotateX(180deg) rotateY(0) scale(0);}
to{ -webkit-transform:rotateX(360deg) rotateY(360deg) scale(1);}
}
@-moz-keyframes round{
from{ -moz-transform:rotateX(0);}
to{ -moz-transform:rotateX(360deg);}
}
@-moz-keyframes show{
from{ -moz-transform:rotateX(180deg) rotateY(0) scale(0);}
to{ -moz-transform:rotateX(360deg) rotateY(360deg) scale(1);}
}
@-ms-keyframes round{
from{ -ms-transform:rotateX(0);}
to{ -ms-transform:rotateX(360deg);}
}
@-ms-keyframes show{
from{ -ms-transform:rotateX(180deg) rotateY(0) scale(0);}
to{ -ms-transform:rotateX(360deg) rotateY(360deg) scale(1);}
}
#game_box{-webkit-animation:show 3s;-moz-animation:show 3s;-ms-animation:show 3s;}
</style>
</head>
<body>
<div id="game_box">
<div id="map"></div>
<div id="time">時間：<input type="text" value="0" disabled="disabled" /> 炸彈：<input type="text" value="50" disabled="disabled" /></div>
</div>
<script>
// 2014年3月 by 王美建 QQ1207526854
window.onload=function()
{
Game.init('game_box','map');
};
var Game={
data : { //關卡數據
mine : 40, col : 16, row : 16
},
init : function(box_id,mapbox_id){ //初始化
this.oBox = document.getElementById(box_id);
this.mapBox = document.getElementById(mapbox_id)
this.mapBox.innerHTML = this.createMap();
this.oMap = this.mapBox.getElementsByTagName('table')[0];
this.aTd = this.oMap.getElementsByTagName('td');
this.time = document.getElementById('time').getElementsByTagName('input')[0];
this.mineNum = document.getElementById('time').getElementsByTagName('input')[1];
this.mineNum.value = this.data.mine;
this.surplus = [];
this.iCount = this.data.col*this.data.row-this.data.mine;
this.createMine();
this.addVal();
this.play();
},
createMap : function() //生成畫布
{
var html = '';
var This = this.data;
var i=0,j=0;
function createTd()
{
var tds = '';
for(j = 0; j < This.row; j++)
{
tds += '<td class = "mask" index='+ (This.col*i+j) +'></td>';
};
return tds;
}
for(i = 0; i < This.col; i++)
{
html += '<tr>' + createTd() + '</tr>';
};
return ('<table id="table_map" cellpadding="0" cellspacing="0" ><tbody>'+html+'</table></tbody>');
},
createMine : function(){ //生成炸彈
var This = this.data;
this.indexArr = [];
this.mineArr = [];
for(var i = 0,j = This.col*This.row; i < j; i++ )
{
this.indexArr.push(i) ; //所有單元格的索引
};
for( var i = 0; i < This.mine; i++ ) //隨機取出This.mine個做為炸彈的索引，不重復
{
var index = Math.round(Math.random()*(this.indexArr.length-1)); //索引
this.mineArr.push(this.indexArr.splice(index,1)[0]);
};
this.mineArr.sort( function(a,b){return a-b;} );
},
addVal : function() //給有炸彈的td添加自定義屬性hasMine值為true
{
for(var i = 0, j = this.mineArr.length; i < j; i++)
{
this.aTd[ this.mineArr[i] ].hasMine = true;
};
},
play : function()
{//鼠標左右鍵同時按下 ev.button=3
this.timeOnoff = false;
var This = this;
this.markNum = [];
this.oMap.oncontextmenu=function(ev) //插旗標記
{
var ev = ev || window.event;
var target = ev.srcElement || ev.target;
if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' )
{
!target.mark ? (target.innerHTML = '▲',target.style.color = '#FFEFAD',target.mark = true,This.mineNum.value--,This.markNum.push( target.getAttribute( 'index' ) )) : (target.innerHTML = '',target.style.color = '#333333',target.mark = false,This.mineNum.value++,This.markNum.splice( This.findIndex( This.markNum,target.getAttribute( 'index' ) ),1 ));
};
return false;
};
this.oMap.onclick = function(ev)
{
var ev = ev || window.event;
var target = ev.srcElement || ev.target;
if(!This.timeOnoff) //開始計時
{
This.timeOnoff = true;
This.timer=setInterval(function(){
This.time.style.webkitAnimation = 'round 1s infinite'; //計時器翻轉
This.time.value++;
},1000)
};
function openTd(aTd,meg,len)
{
var num = 0;
var show = null;
var t = Math.ceil( 15*This.data.col*This.data.row/len ); //未打開格子越多，翻開時間間隔越短
show = setInterval(function(){
aTd[ This.surplus[num] ].className = 'over';
aTd[ This.surplus[num] ].style.webkitAnimation = 'round 1s 1';
if( aTd[ This.surplus[num] ].hasMine && aTd[ This.surplus[num] ].className == 'over' )
{
aTd[ This.surplus[num] ].style.color = '#333333';
aTd[ This.surplus[num] ].innerHTML = '★';
}else{
aTd[ This.surplus[num] ].innerHTML = '';
};
num++;
if(num == len)
{
clearInterval(show);
alert(meg);
}
},t)
};
function countSur() //統計沒打開的格子的索引
{
var iCheck = 0;
This.surplus = [];
for( var i = 0,j = This.data.col*This.data.row; i < j; i++ )
{
if( This.aTd[i].className == 'mask' )
{
iCheck++;
This.surplus.push( i );
};
};
return iCheck;
};
if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' && !target.hasMine )//沒踩到雷
{
This.count( parseInt(target.getAttribute('index')) ); //遞歸
target.style.webkitAnimation = 'round 1s 1';
if( This.iCount <= 10 ) //通關檢測
{
//console.log( 'iCheck='+iCheck+'iCount='+This.iCount )
if( countSur() == This.data.mine ) //剩下格子數等於炸彈數而又沒踩到炸彈，可不就是過關了
{
clearInterval( This.timer );
This.time.style.webkitAnimation = ''; //停止計時器翻轉
openTd( This.aTd,'不錯小伙子，過關了！用時：'+This.time.value+'s',This.surplus.length );
};
};
}else if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' && target.hasMine ){ //踩到雷
clearInterval(This.timer); //停止計時器
This.time.style.webkitAnimation = ''; //停止計時器翻轉
var mineArr = This.mineArr; //優化：全局變局部
var aTd = This.aTd;
for( var i = 0,j = mineArr.length; i < j; i++ )
{
aTd[ mineArr[i] ].style.color = '#333333';
aTd[ mineArr[i] ].className = 'over';
aTd[ mineArr[i] ].innerHTML = '★'; //顯示炸彈標志
};
target.style.color = 'red';
countSur();
openTd( aTd,'小朋友，你輸了~',This.surplus.length );
};
};
},
findIndex : function(arr,ele) //找到數組某個元素在數組中的位置
{
for(var i=0,j=arr.length;i<j;i++)
{
if(ele === arr[i])
{
return i;
};
};
return -1;
},
count : function(iNow) //統計事件源周圍炸彈
{
var arr = []; //事件源周圍的格子索引
var iNum = 0; //事件源周圍炸彈個數
var len = this.data.col;
if( iNow % len == 0 ) //點擊最左邊的格子時
{
arr = [iNow+1,iNow-len,iNow-len+1,iNow+len,iNow+len+1];
}else if( iNow == ( Math.floor( iNow/len ) + 1 ) *len -1 ){ //點擊靠右邊的格子時
arr = [iNow-1,iNow-len,iNow-len-1,iNow+len,iNow+len-1];
}else{ //點擊不靠邊的格子時
arr = [iNow-1,iNow+1,iNow-len,iNow-len+1,iNow-len-1,iNow+len,iNow+len-1,iNow+len+1];
};
for( var i = 0; i < arr.length; i++ ) //統計周圍炸彈
{
if( this.aTd[ arr[ i ] ] && this.aTd[ arr[ i ] ].hasMine )
{
iNum++;
}
};
if( iNum == 0 ) //當前點擊格子周圍沒有炸彈則遞歸
{
this.aTd[iNow].className = '';
this.aTd[ iNow ].innerHTML == '▲' ? this.aTd[ iNow ].innerHTML = '' : '';
for( var i = 0,j = arr.length; i < j; i++ )
{
if( this.aTd[ arr[ i ] ] && this.aTd[ arr[i] ].className == 'mask')
{
this.aTd[ arr[i] ].className = '';
this.aTd[ arr[i] ].innerHTML == '▲' ? this.aTd[ arr[i] ].innerHTML = '' : '';
this.iCount--;
this.count( arr[i] );
};
};
}else{ //當前點擊格子周圍有炸彈則顯示炸彈個數
this.aTd[iNow].innerHTML = iNum;
this.aTd[iNow].style.color = '#333333';
this.aTd[iNow].style.webkitAnimation = 'round 1s 1';
this.aTd[iNow].className == 'mask' ? (this.aTd[iNow].className = '',this.iCount--) : '';
};
}
};
</script>
</body>
</html>
完整實例代碼點擊此處本站下載。
更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數據結構與算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》及《JavaScript遍歷算法與技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
小編推薦
熱門推薦