承接上篇,该篇主要讲述的是,各种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;//返回雷数
}
至此,扫雷的一些基本函数已经定义完成,下篇将为大家讲述,各类点击事件是如何实现的