HTML+CSS+JS实现WIN7扫雷（中）

承接上篇，该篇主要讲述的是，各种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<this.length;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<arr_lei.length;k++){//arr_lei是一个全局变量，储存非雷的位置index
        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<n;i++){//注意这里一个全局变量arr_lei是一个数组，储存着所有可布置雷区的index；
        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<id.length;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;//返回雷数
}

至此，扫雷的一些基本函数已经定义完成，下篇将为大家讲述，各类点击事件是如何实现的