javascript实现扫雷简易版
本文实例为大家分享了javascript实现扫雷简易版的具体代码，供大家参考，具体内容如下
使用截图
说明
这个完成的建议版本，所以没有插旗子，没有计时，就是最基本的原理实现，熟练的大佬30min就能完成
代码讲解
初始数据
varMAPSIZE=10;
varBOMBNUM=1;
varBOMBPOSITION={};
varSQUAERPOSITION={};
varSQUARECHECK={};
varend=false;
初始化地图(CreateMap())
用BOMBPOSITION这个hash表记录雷的位置，然后生成地图长*地图宽数量的div块然后完成定位，然后用SQUAERPOSITION记录这些div块并且用SQUARECHECK记录当前这些块有没有被点击（记录是否是未开启块）
functionCreateMap(){
//生成初始的地图
//根据雷的数目生成一个随机雷数目
Create_BOMB();
for(leti=0;i
生成雷(Create_BOMB())
这里的生成就是完善BOMBPOSITION这个hash表
functionCreate_BOMB(){
letbombnum=0;
while(bombnum
每个div块的点击事件
游戏结束GAMEOVER()
如果点到了雷就展示所有雷的位置然后游戏结束
functionGAMEOVER(){
for(letindexinBOMBPOSITION){
SQUAERPOSITION[index].innerText="@"
}
end=true;
}
处理点击的块(Remove())
这个处理是个递归过程，一个div会引起其他div的处理所有要先检查下游戏是不是结束了，如果没结束就遍历周边一圈的块，也就是x-1->x+1y-1->y+1，但是自身就不需要遍历了，这里要注意，然后这些块如果已经被处理过了也不用进行处理，遍历完后如果有雷则在这个块上记录雷数目，如果没有雷那么就将周边块中未遍历的进行Remove()处理，这个过程是一个递归，也可以理解成深度优先级处理。
functionRemove(x,y){
if(ISGAMEOVER()){
if(end==false){
alert("游戏结束");
GAMEOVER();
}
return;
}
letResult_Detection=Bomb_Detection(x,y);
if(Result_Detection[0].length==1){
if(Result_Detection[0][0]==0){
//单纯变颜色
Change(x,y);
}else{
//更改里面的文字是雷的数目
Change(x,y);
SQUAERPOSITION[x+"_"+y].innerText=Result_Detection[0][0];
}
}else{
//如果没有雷自己先变化然后遍历剩下的
Change(x,y);
for(leti=0;i
检测游戏是否结束(ISGAMEOVER())
就是看一下还有多少块没被处理，如果正好是雷的数目那就游戏结束了
functionISGAMEOVER(){
letUsedNum=0;
for(letindexinSQUARECHECK){
if(SQUARECHECK[index]==true){
UsedNum++;
}
}
console.log(UsedNum);
if(UsedNum==MAPSIZE*MAPSIZE-BOMBNUM)
returntrue;
else
returnfalse;
}
周边遍历(Bomb_Detection())
如果有雷就返回[[Bomb_num]]，如果没有雷但是周边的都被遍历过了就返回[[0]]，如果没有雷然后有未被遍历过的元素则返回未遍历数组queue[]
functionBomb_Detection(x,y){
letqueue=[];
letbombnum=0;
for(leti=x-1;i<=x+1;i++){
for(letj=y-1;j<=y+1;j++){
if((i!=x||j!=y)&&Edge_Detection(i,j)==true){
if(BOMBPOSITION[i+"_"+j]==1){
bombnum++;
}elseif(SQUARECHECK[i+"_"+j]==false){
queue.push([i,j]);
}
}
}
}
if(bombnum>0){
//如果周边有雷
return[
[bombnum]
];
}elseif(bombnum==0&&queue.length==0){
//如果周边没雷但是所有的都被遍历过了
return[
[0]
];
}else{
returnqueue;
}
}
边界检测(Edge_Detection())
在遍历周边块的时候要注意，这个周边块需要是合理的
functionEdge_Detection(x,y){
//只要在0,0->MAPSIZE,MAPSIZE就行
if(x>=0&&y>=0&&x
处理被处理的块(Change())
如果是周边没有雷那就是变成空白，如果有就写上数字，如果是雷就里面加上@
functionChange(x,y){
SQUAERPOSITION[x+"_"+y].className="lattice2";
SQUARECHECK[x+"_"+y]=true;
SQUAERPOSITION[x+"_"+y].style.top=20*x+"px";
SQUAERPOSITION[x+"_"+y].style.left=20*y+"px";
}
整体代码
扫雷