网页扫雷html css js,HTML+CSS+JS实现WIN7扫雷（中）
承接上篇，該篇主要講述的是，各種JS函數(shù)的實(shí)現(xiàn)。準(zhǔn)備好了嗎，GO！！！
1 幾個(gè)通用函數(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){//獲取某個(gè)已知id的元素下，某個(gè)classname的元素
return g(div).getElementsByClassName(classname.substr(1));
}
g()相當(dāng)與JQ中的$(#id) $(.class)，g2()相當(dāng)于JQ中的$(#id .class)，由于寫掃雷的時(shí)候我還沒有學(xué)習(xí)JQ，所以只能自定義這兩個(gè)函數(shù)。
function Random(a,b){//隨機(jī)范圍內(nèi)的一個(gè)整數(shù)
return Math.ceil(Math.random()*(Math.max(a,b)-Math.min(a,b)+1)+Math.min(a,b)-0.5);
}
隨機(jī)(a,b)范圍內(nèi)的一個(gè)數(shù)，這個(gè)函數(shù)看起來有點(diǎn)怪，因?yàn)槲耶?dāng)初不知道ceil是向上取整，以為是四舍五入，為了讓范圍內(nèi)的每個(gè)數(shù)都等概率隨機(jī)，所以寫出這個(gè)殘廢函數(shù)，將就著先用吧。
Array.prototype.inarr=function(obj){
for(var iii=0;iii
if(this[iii]==obj){
return true;
break;
}
continue;
}
return false;
}
一個(gè)自定義屬性，用來判斷數(shù)組內(nèi)是否存在某個(gè)obj，這個(gè)函數(shù)也是剛開始學(xué)藝不精寫出來的，實(shí)際上break和continue都是多余的，因?yàn)橐坏┯辛藃eturn函數(shù)就結(jié)束了。
2 開始游戲函數(shù)startgame()
函數(shù)描述：為開始游戲按鈕，添加一個(gè)事件，點(diǎn)擊后開始游戲。
function startgame(){
chongzhi();//重置函數(shù)，后面講，主要是初始化被點(diǎn)亂的掃雷區(qū)域
var number=g('number').value;//獲取輸入的雷數(shù)
if(number>0&&number<=150){//如果輸入雷數(shù)是一個(gè)合理的范圍，執(zhí)行開始游戲
g('zhedang').style.zIndex=0;//將遮擋幕布的zindex設(shè)為0，置于底層，開幕啦
timer();//開始計(jì)時(shí)，timer()是一個(gè)計(jì)時(shí)函數(shù)，后面講
start_index=1;//一個(gè)定義好的全局變量，用來判斷是不是剛開始游戲，該變量在實(shí)際開始游戲后會重置為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 計(jì)時(shí)函數(shù)timer()
函數(shù)描述：開始游戲后，用來計(jì)時(shí)的，游戲結(jié)束后停止計(jì)時(shí)。
var t;//定義計(jì)時(shí)器的名字，方便結(jié)束
function timer(){
g('text_time').innerHTML=+g('text_time').innerHTML+1;//狀態(tài)欄中的顯示時(shí)間自加1
t=setTimeout("timer()",1000);延遲1S遞歸執(zhí)行；
}
4 判斷是否勝利的函數(shù)shengli()
函數(shù)描述：掃雷過程中，每一次點(diǎn)開區(qū)塊，都要去判斷是否已經(jīng)掃完啦。
function shengli(){
var flag=1;//立一個(gè)flag
for(var k=0;k
if(g('shuzi_'+arr_lei[k]).style.zIndex!=50){
flag=0;
break;
}
}//遍歷arr_lei，只要有一個(gè)div.shuzi沒有被點(diǎn)開，就把flag=0；
if(flag==1){
clearTimeout(t);
g('zhedang').style.zIndex=100;
alert('你贏了');//如果所有的非雷區(qū)域都點(diǎn)開了，停止計(jì)時(shí)，閉幕，提示你贏了
}
}
5 重置函數(shù)chongzhi()
函數(shù)描述：該函數(shù)用于重置被點(diǎn)的雜亂無章的雷區(qū)。作用相當(dāng)于刷新頁面。但實(shí)際上沒刷新，只是去除了每個(gè)區(qū)塊下4個(gè)層的行內(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);//停止計(jì)時(shí)器
g('text_time').innerHTML=0;//將計(jì)時(shí)變?yōu)?；
}
6 布置雷場函數(shù)bulei(n)
函數(shù)描述：布雷的原理，遍歷所有區(qū)塊，每次遍歷隨機(jī)將其中一個(gè)區(qū)塊布雷，布雷的方法是，將div.lei這個(gè)層置于最上方，zindex=45，并且將透明度設(shè)為0，讓你看不到，實(shí)際上最上面就是0，一點(diǎn)就炸，哈哈！
function bulei(n){//n代表要布置的雷的總數(shù)
for(var i=0;i
var ran=Random(0,arr_lei.length-1);//隨機(jī)一個(gè)index
g('lei_'+arr_lei[ran]).style.zIndex=45;//將隨機(jī)到的index對應(yīng)的div.lei置于最上方
arr_lei.splice(ran,1);//將該index對應(yīng)的下標(biāo)從arr_lei中移除
}
}
7 計(jì)算點(diǎn)擊區(qū)塊周圍九宮格內(nèi)的雷數(shù)leishu(n)
函數(shù)描述：div.shuzi里本來是沒有數(shù)字的，只有當(dāng)執(zhí)行了一個(gè)點(diǎn)開事件后，div.shuzi置于頂層時(shí)，才會去計(jì)算雷數(shù)。
function leishu(n){//n為點(diǎn)擊區(qū)塊的下標(biāo)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];//定義一個(gè)id數(shù)組，將點(diǎn)擊區(qū)塊九宮格內(nèi)的下標(biāo)填入數(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)定義完成，下篇將為大家講述，各類點(diǎn)擊事件是如何實(shí)現(xiàn)的
打開App，閱讀手記
總結(jié)
以上是生活随笔為你收集整理的网页扫雷html css js,HTML+CSS+JS实现WIN7扫雷（中）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS屏幕尺寸和分辨率了解
- 下一篇： 智能家居 (4) ——工厂模式火焰报警