js实现简单扫雷
本文实例为大家分享了js实现简单扫雷的具体代码,供大家参考,具体内容如下
实现效果:
总体思想:这个扫雷难点主要就两点:第一点就是雷的随机分布,我这里使用js动态生成了10X10的table表格,然后设定生成20个雷,然后在生成每个格子代表的数字,雷我们用9表示,因为0-8要被其他非雷格子使用,然后我们只要一格是雷区那么周围的格子都加一,这样我们的雷区就生成好了,然后玩法的编写主要难点就是在当点击数字为0时的格子时要把它周围的0区也显示出来,因此这里我们使用递归来实现
1、界面的生成
//生成界面 functioninit(){ document.write("") for(vari=1;i<11;i++){ document.write(" "); for(varj=1;j<11;j++){ document.write(" "); } document.write("") vart=document.getElementsByTagName('table')[0]; vartd=document.getElementsByTagName('td'); for(vari=0;i"+arr3[i][j]+""); } document.write(" 2、我们表格是10X10的,但是后面的操作要计算每个格子的值,因此当格子在边界的话数组就会越界,所以我们这边定义二维数组12X12来表示10X10的表格中的数值,雷我们随机生成20个
//初始化数组 functioninitarr(){ vararr=newArray(12); for(vari=0;i<12;i++){ arr[i]=newArray(12); for(varj=0;j<12;j++){ arr[i][j]=0; } } returnarr; } //随机生成雷 functionrangemine(){ vararr=initarr(); varnum=0; for(varindex=0;index<20;index++){ while(true){ varrow=Math.floor(Math.random()*10)+1; varcol=Math.floor(Math.random()*10)+1; if(arr[row][col]!=9){ arr[row][col]=9; break; } } } returnarr; }3、生成每块对应的数值我们实现方法为遍历数组,如果为雷,则雷周围的八块的数值+1
//生成每块所对应的数字 functionnum(){ vararr2=rangemine(); for(vari=1;i<11;i++){ for(varj=1;j<11;j++){ if(arr2[i][j]>=9){ arr2[i][j+1]+=1; arr2[i][j-1]+=1; arr2[i-1][j]+=1; arr2[i+1][j]+=1; arr2[i-1][j+1]+=1; arr2[i-1][j-1]+=1; arr2[i+1][j-1]+=1; arr2[i+1][j+1]+=1; } } } for(vari=1;i<11;i++){ for(varj=1;j<11;j++){ if(arr2[i][j]>8){ arr2[i][j]=9; } } } returnarr2; }4、添加监听器,我这里添加了touch事件,touch事件只用于移动端,因此pc端要运行要模拟移动端
//添加监听器 functiongostart(){ vart=document.getElementsByTagName('td'); for(vari=0;i5、递归实现扫雷,对周围没有雷的格子进行递归将其周围也是0的格子展示出来
//递归消除点到0块时显露出其他的块 functionmix(x,y,e){ varflag=0; if(x>0&&x<11&&y>0&&y<11&&arr3[x][y]==0){ //防止无限递归 e.parentElement.rows[x-1].cells[y-1].style.opacity=1; e.parentElement.rows[x-1].cells[y-1].innerHTML=""; e.parentElement.rows[x-1].cells[y-1].style.background='#a4eaff'; arr3[x][y]=10; mix(x,y+1,e); mix(x,y-1,e); mix(x+1,y,e); mix(x-1,y,e); mix(x+1,y+1,e); mix(x-1,y+1,e); mix(x+1,y-1,e); mix(x-1,y-1,e); }elseif(x>0&&x<11&&y>0&&y<11&&arr3[x][y]>0&&arr3[x][y]<9){ //颜色变红且透明度变为1 arr3[x][y]=-1; e.parentElement.rows[x-1].cells[y-1].style.opacity=1; e.parentElement.rows[x-1].cells[y-1].style.backgroundColor='#a4eaff'; //判断是否结束 for(vari=1;i0&&x<11&&y>0&&y<11&&arr3[x][y]==9){ alert('你踩到地雷啦!!!'); arr3=num(); //移除原来的表格 vars=document.getElementsByTagName('table')[0]; s.parentNode.removeChild(s); init(); gostart(); } } 6、全部js代码:
functioninitarr(){ vararr=newArray(12); for(vari=0;i<12;i++){ arr[i]=newArray(12); for(varj=0;j<12;j++){ arr[i][j]=0; } } returnarr; } //随机生成雷 functionrangemine(){ vararr=initarr(); varnum=0; for(varindex=0;index<20;index++){ while(true){ varrow=Math.floor(Math.random()*10)+1; varcol=Math.floor(Math.random()*10)+1; if(arr[row][col]!=9){ arr[row][col]=9; break; } } } returnarr; } //生成每块所对应的数字 functionnum(){ vararr2=rangemine(); for(vari=1;i<11;i++){ for(varj=1;j<11;j++){ if(arr2[i][j]>=9){ arr2[i][j+1]+=1; arr2[i][j-1]+=1; arr2[i-1][j]+=1; arr2[i+1][j]+=1; arr2[i-1][j+1]+=1; arr2[i-1][j-1]+=1; arr2[i+1][j-1]+=1; arr2[i+1][j+1]+=1; } } } for(vari=1;i<11;i++){ for(varj=1;j<11;j++){ if(arr2[i][j]>8){ arr2[i][j]=9; } } } returnarr2; } vararr3=num() //生成界面 functioninit(){ document.write("") for(vari=1;i<11;i++){ document.write(" "); for(varj=1;j<11;j++){ document.write(" "); } document.write("") vart=document.getElementsByTagName('table')[0]; vartd=document.getElementsByTagName('td'); for(vari=0;i"+arr3[i][j]+""); } document.write(" 0&&x<11&&y>0&&y<11&&arr3[x][y]==0){ //防止无限递归 e.parentElement.rows[x-1].cells[y-1].style.opacity=1; e.parentElement.rows[x-1].cells[y-1].innerHTML=""; e.parentElement.rows[x-1].cells[y-1].style.background='#a4eaff'; arr3[x][y]=10; mix(x,y+1,e); mix(x,y-1,e); mix(x+1,y,e); mix(x-1,y,e); mix(x+1,y+1,e); mix(x-1,y+1,e); mix(x+1,y-1,e); mix(x-1,y-1,e); }elseif(x>0&&x<11&&y>0&&y<11&&arr3[x][y]>0&&arr3[x][y]<9){ //颜色变红且透明度变为1 arr3[x][y]=-1; e.parentElement.rows[x-1].cells[y-1].style.opacity=1; e.parentElement.rows[x-1].cells[y-1].style.backgroundColor='#a4eaff'; //判断是否结束 for(vari=1;i 0&&x<11&&y>0&&y<11&&arr3[x][y]==9){ alert('你踩到地雷啦!!!'); arr3=num(); //移除原来的表格 vars=document.getElementsByTagName('table')[0]; s.parentNode.removeChild(s); init(); gostart(); } } 7、总结
这次的扫雷最大的缺点就是不能保证第一次不点到雷,还有就是是否还没有进行测试。。因为我也没有玩过一整局可能会有些许小bug
更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。