本文實例講述了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 : { //關(guān)卡數(shù)據(jù) 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個做為炸彈的索引，不重復(fù) { 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'; //計時器翻轉(zhuǎn) 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() //統(tǒng)計沒打開的格子的索引 { 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 ) //通關(guān)檢測 { //console.log( 'iCheck='+iCheck+'iCount='+This.iCount ) if( countSur() == This.data.mine ) //剩下格子數(shù)等于炸彈數(shù)而又沒踩到炸彈，可不就是過關(guān)了 { clearInterval( This.timer ); This.time.style.webkitAnimation = ''; //停止計時器翻轉(zhuǎn) openTd( This.aTd,'不錯小伙子，過關(guān)了！用時：'+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 = ''; //停止計時器翻轉(zhuǎn) var mineArr = This.mineArr; //優(yōu)化：全局變局部 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) //找到數(shù)組某個元素在數(shù)組中的位置 { for(var i=0,j=arr.length;i<j;i++) { if(ele === arr[i]) { return i; }; }; return -1; }, count : function(iNow) //統(tǒng)計事件源周圍炸彈 { var arr = []; //事件源周圍的格子索引 var iNum = 0; //事件源周圍炸彈個數(shù) 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++ ) //統(tǒng)計周圍炸彈 { 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{ //當前點擊格子周圍有炸彈則顯示炸彈個數(shù) 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>完整實例代碼點擊此處本站下載。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運算用法總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript遍歷算法與技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
