手记

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;//返回雷数
}

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

6人推荐
随时随地看视频
慕课网APP