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(""+arr3[i][j]+"");
}
document.write(" ");
}
document.write("")
vart=document.getElementsByTagName('table')[0];
vartd=document.getElementsByTagName('td');
for(vari=0;i
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;i
5、递归实现扫雷，对周围没有雷的格子进行递归将其周围也是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(""+arr3[i][j]+"");
}
document.write(" ");
}
document.write("")
vart=document.getElementsByTagName('table')[0];
vartd=document.getElementsByTagName('td');
for(vari=0;i0&&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();
}
}
7、总结
这次的扫雷最大的缺点就是不能保证第一次不点到雷，还有就是是否还没有进行测试。。因为我也没有玩过一整局可能会有些许小bug
更多有趣的经典小游戏实现专题，分享给大家：
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。