js扫雷小游戏

扫雷是winxp中的一个金典小游戏，看的简单，但是里面还是有些算法的，下面就跟着小编一起来了解下吧

 

游戏规则：

1. 雷周围的方块显示雷的个数
2. 点击不在雷周围的方块消除所有与之相连接的方块
3. 点击到雷结束游戏

思路：

1. 产生指定数量的地雷
2. 计算方块周围的地雷
3. 点击地雷结束
4. 点击地雷周边显示地雷个数
5. 点击空白块，消除所有相连的空白块

开始写代码产生随机数量的地雷有多种方式，随机数，但是会存在一个问题，就是可能产生重复的数据，所以项目中使用另一种方式，洗牌式，比如说产生1-100的不重复的20个随机数，先生成一个100容量的数组，然后将数组打乱，最后取出数组的前20位

randomNumber:  function (total,size){/***产生随机数**/
		        var result=[];//最后的结果集
		        var temp=[];//临时变量
		        for(var i=0;i<total;i++){
		            temp.push(i);
		        }
		        //开始打乱数据
		        for(var i=1;i<=total;i++){
		           var start = parseInt(Math.random()*total);
		           var end = parseInt(Math.random()*total);
		           var t=0;
		           //交换数据
		           if(start!=end){
		                t=temp[end];
		                temp[end]=temp[start];
		                temp[start]=t;
		           }
		        }
		        for(var i=0;i<size;i++){
		            result.push(temp[i]);
		        }
		        return result;
		    },

计算方块周围的地雷，这个比较简单，for循环遍历就可以了

  //计算每个方块周围的炸弹个数
			    for(var i=0;i<this.row;i++){
			        for(var j=0;j<this.col;j++){
			            //当是炸弹时跳出
			            if(dataList[i][j]==-1){
			                continue;
			            }
			            //当不是炸弹时，查看周围炸弹个数
			            var num=0;
			            var tempx=0;
			            var tempy=0;
			            for(var m=-1;m<2;m++){
			                for(var n=-1;n<2;n++){
			                    tempx=i+m;
			                    tempy=j+n;
			                    //当是炸弹时加一
			                    if(tempx>=0&&tempx<this.row&&tempy>=0&&tempy<this.col&&dataList[tempx][tempy]==-1){
			                        num++;
			                    }
			                }
			            }
			            dataList[i][j]=num;
			        }
			    }

点击空白块消除相连的所有空白块，这个就需要一点小小的算法知识了，思想其实很简单，之前学数据结构时有一个寻找路径问题，其实这个也是一样的，通过入栈出栈操作就能够完成

//清除相邻白块
            clearblack:function(i,j,list){
                //创建任务栈
                var stack=[];
                var item={};
                item.x=i;
                item.y=j;
                item.index=1;
                var totalX=this.row;
                var totalY=this.col;
                stack.push(item);
                do{
                    //获取堆栈最上面的一个元素
                    var length=stack.length;
                    if(length>0){
                        var temp=stack[length-1];
                        //根据index获取下一个元素的坐标
                        if(temp.index>4){
                            //删除最后一个元素
                            stack.pop();
                        }else if(temp.index==1){
                            //当下一个元素时空时
                            if(temp.x-1>=0&&temp.x-1<totalX&&temp.y>=0&&temp.y<totalY&&this.list[temp.x-1][temp.y].value==0&&!this.list[temp.x-1][temp.y].active){
                                //设置为激活状态
                                this.list[temp.x-1][temp.y].active=true;
                                var itemT={};
                                itemT.x=temp.x-1;
                                itemT.y=temp.y;
                                itemT.index=1;
                                stack.push(itemT);
                            }else{
                                temp.index++;
                            }
                        }else if(temp.index==2){
                            //当下一个元素时空时
                            if(temp.x>=0&&temp.x<totalX&&temp.y+1>=0&&temp.y+1<totalY&&this.list[temp.x][temp.y+1].value==0&& !this.list[temp.x][temp.y+1].active){
                               //设置为激活状态
                               this.list[temp.x][temp.y+1].active=true;
                                var itemT={};
                                itemT.x=temp.x;
                                itemT.y=temp.y+1;
                                itemT.index=1;
                                stack.push(itemT);
                            }else{
                                temp.index++;
                            }
                        }else if(temp.index==3){
                            //当下一个元素时空时
                            if(temp.x+1>=0&&temp.x+1<totalX&&temp.y>=0&&temp.y<totalY&&this.list[temp.x+1][temp.y].value==0&&!this.list[temp.x+1][temp.y].active){
                                //设置为激活状态
                                this.list[temp.x+1][temp.y].active=true;
                                var itemT={};
                                itemT.x=temp.x+1;
                                itemT.y=temp.y;
                                itemT.index=1;
                                stack.push(itemT);
                            }else{
                                temp.index++;
                            }
                        }else if(temp.index==4){
                            //当下一个元素时空时
                            if(temp.x>=0&&temp.x<totalX&&temp.y-1>=0&&temp.y-1<totalY&&this.list[temp.x][temp.y-1].value==0&&!this.list[temp.x][temp.y-1].active){
                                //设置为激活状态
                                this.list[temp.x][temp.y-1].active=true;
                                var itemT={};
                                itemT.x=temp.x;
                                itemT.y=temp.y-1;
                                itemT.index=1;
                                stack.push(itemT);
                            }else{
                                temp.index++;
                            }
                        }
                    }
                }while(stack.length>0);
                return list;
            },

好了，主体的代码就是这么多，具体详细的代码在 https://github.com/zhangruizhi123/win/tree/master/app/sweep

所有代码

效果：