承接上篇，該篇主要講述的是，各種JS函數的實現。準備好了嗎，GO！！！

1 幾個通用函數的定義

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，所以只能自定義這兩個函數。

function Random(a,b){//隨機范圍內的一個整數

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

}

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

Array.prototype.inarr=function(obj){

for(var iii=0;iii

if(this[iii]==obj){

return true;

break;

}

continue;

}

return false;

}

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

2 開始游戲函數startgame()

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

function startgame(){

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

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

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

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

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

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

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

}

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

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

}

else {

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

}//雷數輸入不合理的處理辦法

}

3 計時函數timer()

函數描述：開始游戲后，用來計時的，游戲結束后停止計時。

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

function timer(){

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

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

}

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

函數描述：掃雷過程中，每一次點開區塊，都要去判斷是否已經掃完啦。

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('你贏了');//如果所有的非雷區域都點開了，停止計時，閉幕，提示你贏了

}

}

5 重置函數chongzhi()

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

function chongzhi(){

var html_zhengmian=[];

var html_chaqi=[];

var html_lei=[];

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

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;//將計時變為0；

}

6 布置雷場函數bulei(n)

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

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

for(var i=0;i

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

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

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

}

}

7 計算點擊區塊周圍九宮格內的雷數leishu(n)

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

function leishu(n){//n為點擊區塊的下標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數組，將點擊區塊九宮格內的下標填入數組

var n_lei=0;//定義雷數=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';//不同數字的雷，顯示不同的顏色

return n_lei;//返回雷數

}

至此，掃雷的一些基本函數已經定義完成，下篇將為大家講述，各類點擊事件是如何實現的

打開App，閱讀手記

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。