承接上篇，該篇主要講述的是，各種JS函數(shù)的實現(xiàn)。準備好了嗎，GO！！！

1 幾個通用函數(shù)的定義

function g(id){//通用獲取已知id或classname的元素

if(id.substr(0,1)=='.'){

return document.getElementsByClassName(id.substr(1));

}

return document.getElementById(id);

}

function g2(div,classname){//獲取某個已知id的元素下，某個classname的元素

return g(div).getElementsByClassName(classname.substr(1));

}

g()相當與JQ中的$(#id) $(.class)，g2()相當于JQ中的$(#id .class)，由于寫掃雷的時候我還沒有學習JQ，所以只能自定義這兩個函數(shù)。

function Random(a,b){//隨機范圍內(nèi)的一個整數(shù)

return Math.ceil(Math.random()*(Math.max(a,b)-Math.min(a,b)+1)+Math.min(a,b)-0.5);

}

隨機(a,b)范圍內(nèi)的一個數(shù)，這個函數(shù)看起來有點怪，因為我當初不知道ceil是向上取整，以為是四舍五入，為了讓范圍內(nèi)的每個數(shù)都等概率隨機，所以寫出這個殘廢函數(shù)，將就著先用吧。

Array.prototype.inarr=function(obj){

for(var iii=0;iii

if(this[iii]==obj){

return true;

break;

}

continue;

}

return false;

}

一個自定義屬性，用來判斷數(shù)組內(nèi)是否存在某個obj，這個函數(shù)也是剛開始學藝不精寫出來的，實際上break和continue都是多余的，因為一旦有了return函數(shù)就結(jié)束了。

2 開始游戲函數(shù)startgame()

函數(shù)描述：為開始游戲按鈕，添加一個事件，點擊后開始游戲。

function startgame(){

chongzhi();//重置函數(shù)，后面講，主要是初始化被點亂的掃雷區(qū)域

var number=g('number').value;//獲取輸入的雷數(shù)

if(number>0&&number<=150){//如果輸入雷數(shù)是一個合理的范圍，執(zhí)行開始游戲

g('zhedang').style.zIndex=0;//將遮擋幕布的zindex設(shè)為0，置于底層，開幕啦

timer();//開始計時，timer()是一個計時函數(shù)，后面講

start_index=1;//一個定義好的全局變量，用來判斷是不是剛開始游戲，該變量在實際開始游戲后會重置為0；

g('text_shuliang').innerHTML=g('number').value;//狀態(tài)欄的雷數(shù)提示=輸入雷數(shù)

}

else if(number==''number==0){

alert('沒有輸入雷數(shù)或雷數(shù)為0');

}

else {

alert('輸入雷數(shù)過大');

}//雷數(shù)輸入不合理的處理辦法

}

3 計時函數(shù)timer()

函數(shù)描述：開始游戲后，用來計時的，游戲結(jié)束后停止計時。

var t;//定義計時器的名字，方便結(jié)束

function timer(){

g('text_time').innerHTML=+g('text_time').innerHTML+1;//狀態(tài)欄中的顯示時間自加1

t=setTimeout("timer()",1000);延遲1S遞歸執(zhí)行；

}

4 判斷是否勝利的函數(shù)shengli()

函數(shù)描述：掃雷過程中，每一次點開區(qū)塊，都要去判斷是否已經(jīng)掃完啦。

function shengli(){

var flag=1;//立一個flag

for(var k=0;k

if(g('shuzi_'+arr_lei[k]).style.zIndex!=50){

flag=0;

break;

}

}//遍歷arr_lei，只要有一個div.shuzi沒有被點開，就把flag=0；

if(flag==1){

clearTimeout(t);

g('zhedang').style.zIndex=100;

alert('你贏了');//如果所有的非雷區(qū)域都點開了，停止計時，閉幕，提示你贏了

}

}

5 重置函數(shù)chongzhi()

函數(shù)描述：該函數(shù)用于重置被點的雜亂無章的雷區(qū)。作用相當于刷新頁面。但實際上沒刷新，只是去除了每個區(qū)塊下4個層的行內(nèi)樣式。

function chongzhi(){

var html_zhengmian=[];

var html_chaqi=[];

var html_lei=[];

var html_shuzi=[];//定義數(shù)組，保存不同層

html_zhengmian=g('.zhengmian');

html_chaqi=g('.chaqi');

html_lei=g('.lei');

html_shuzi=g('.shuzi');

for(var i=0;i<480;i++){

html_zhengmian[i].style.zIndex=40;

html_chaqi[i].style.zIndex=30;

html_lei[i].style.zIndex=1;

html_lei[i].style.opacity=0;

html_shuzi[i].style.zIndex=20;

}//遍歷，將所有層初始化

arr_lei=[];//初始化全局變量

g('zhedang').style.zIndex=100;//閉幕

clearTimeout(t);//停止計時器

g('text_time').innerHTML=0;//將計時變?yōu)?；

}

6 布置雷場函數(shù)bulei(n)

函數(shù)描述：布雷的原理，遍歷所有區(qū)塊，每次遍歷隨機將其中一個區(qū)塊布雷，布雷的方法是，將div.lei這個層置于最上方，zindex=45，并且將透明度設(shè)為0，讓你看不到，實際上最上面就是0，一點就炸，哈哈！

function bulei(n){//n代表要布置的雷的總數(shù)

for(var i=0;i

var ran=Random(0,arr_lei.length-1);//隨機一個index

g('lei_'+arr_lei[ran]).style.zIndex=45;//將隨機到的index對應(yīng)的div.lei置于最上方

arr_lei.splice(ran,1);//將該index對應(yīng)的下標從arr_lei中移除

}

}

7 計算點擊區(qū)塊周圍九宮格內(nèi)的雷數(shù)leishu(n)

函數(shù)描述：div.shuzi里本來是沒有數(shù)字的，只有當執(zhí)行了一個點開事件后，div.shuzi置于頂層時，才會去計算雷數(shù)。

function leishu(n){//n為點擊區(qū)塊的下標index

var id=[];

if(n%30>0 && n%30<29)

id=[n-31,n-30,n-29,n-1,n+1,n+29,n+30,n+31];

else if(n%30==0)

id=[n-30,n-29,n+1,n+30,n+31];

else id=[n-31,n-30,n-1,n+29,n+30];//定義一個id數(shù)組，將點擊區(qū)塊九宮格內(nèi)的下標填入數(shù)組

var n_lei=0;//定義雷數(shù)=0

for(var i=0;i

if(id[i]>=0&&id[i]<480){

if(g('lei_'+id[i]).style.zIndex==45) n_lei++;

}

}//遍歷九宮格，如果有雷，n_lei自加1；

if(n_lei==0) n_lei='';//0雷顯示空

if(n_lei==1) g('shuzi_'+n).style.color='#003';

else if(n_lei==2) g('shuzi_'+n).style.color='#0f0';

else if(n_lei==3) g('shuzi_'+n).style.color='#f00';

else if(n_lei==4) g('shuzi_'+n).style.color='#006';

else if(n_lei==5) g('shuzi_'+n).style.color='#903';

else if(n_lei==6) g('shuzi_'+n).style.color='#066';

else if(n_lei==6) g('shuzi_'+n).style.color='#000';

else g('shuzi_'+n).style.color='#666';//不同數(shù)字的雷，顯示不同的顏色

return n_lei;//返回雷數(shù)

}

至此，掃雷的一些基本函數(shù)已經(jīng)定義完成，下篇將為大家講述，各類點擊事件是如何實現(xiàn)的

打開App，閱讀手記

總結(jié)

以上是生活随笔為你收集整理的网页扫雷html css js,HTML+CSS+JS实现WIN7扫雷（中）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。