基于javascript扫雷小游戏,以前上学经常玩

Posted 编程界明世隐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于javascript扫雷小游戏,以前上学经常玩相关的知识,希望对你有一定的参考价值。

引言:

扫雷是系统自带的经典小游戏,以前上学那会上机的时候就经常玩这个,趁着五一假期的最后一天,用canvas编写了这个小游戏,看着还行,不知道会不会有什么我没发现的bug,难度目前是设置成简易的,如果要改难度,代码稍做修改即可。

效果图

实现思路

1.创建9行9列的二维数组。

2.设置雷:随机行数 i 和列数 j,根据随机到 i、j 从二维数组中取出对应的元素,将取到的元素设置一个属性type等于1,表示当前元素已经是雷,并且递增雷计数器,然后递归调用;如果取到的元素已经是雷了,则跳过继续执行,雷计数器达到设定的最大值就跳出递归。

3.计算每个元素周围的雷数量(周围指的是 左上、上、右上、右、右下、下、左下、左 这8个位置),当前位置显示对应的数字(待会内容里面细说)

4.同样根据这个二维数组来创建遮罩的小方块,正好盖住之前创建的图形。

5.点击这个遮罩的小方块则触发揭开,揭开后根据对应的数字或者雷做不同的操作。

代码实现

创建背景及相关元素

	//绘制背景及相关默认元素
	Saolei.prototype.drawBG=function(){
		var image,img,sx=0,sy=0,sWidth=141,sHeight=54,dx=20,dy=340,dWidth=141,dHeight=54;
		//计时
		image = this.imgObj['common'][15];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.renderArr.push(img);
		
		sx=0,sy=0,sWidth=141,sHeight=52,dx=180,dy=340,dWidth=141,dHeight=52;
		//计雷
		image = this.imgObj['common'][14];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.renderArr.push(img);
		//创建一个方形区域
		var	rect = new _.Rect({
			x:24,
			y:44,
			width:289,
			height:289,
			stroke:true
		 })
		 this.renderArr.push(rect);
		 
		sx=0,sy=0,sWidth=100,sHeight=40,dx=120,dy=2,dWidth=100,dHeight=40;
		//重新开始按钮
		image = this.imgObj['common'][21];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.renderArr.push(img);
		this.reStartObj=img;
	}

创建雷和显示对应的图片

1.随机row 和 col,并从二维数组中获取到这个对象;
2.判断他是否是雷,如果是则跳过当前;
3.如果当前不是雷,则标记当前对象为雷对象,并且更改图片;
4.递归,当达到设定的数量时跳出。

//创建被遮盖
	Saolei.prototype.createUnder=function(){
		var image,img,sx=0,sy=0,sWidth=79,sHeight=79,dx=0,dy=0,dWidth=32,dHeight=32;
		var rows = this.rows;//行
		var cols = this.cols;//列
		image = this.imgObj['common'][9];
		//二维网格数组
		var gridArr=[];
		var arr = this.gridArr,cell;
		for(var i=0;i<rows;i++){//行
			dy = 45+i*dHeight;
			gridArr[i]=[];
			for(var j=0;j<cols;j++){//列
				dx = 25+j*dWidth;
				img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
				img.type=0;
				this.renderArr.push(img);
				
				gridArr[i][j]=img;
			}
		}
		
		this.gridArr=gridArr;
		
		//创建雷
		this.createLei();
		
	}
	
	//创建雷
	Saolei.prototype.createLei=function(){
		//当达到设定的数量时跳出
		if(this.leiMaxCount<=0) {
			return ;
		}
		var arr = this.gridArr;
		/*
			1.随机row 和 col,并从二维数组中获取到这个对象
		  	2.判断他是否是雷,如果是则跳过当前
		  	3.如果当前不是雷,则标记当前对象为雷对象,并且更改图片
		  	4.递归,当达到设定的数量时跳出
		*/
		var row = _.getRandom(0,this.rows);
		var col = _.getRandom(0,this.cols);
		var cell = arr[row][col];
		if(cell.type==0){
			//标记为雷
			cell.type=1;
			cell.image = this.imgObj['common'][18];
			this.leiMaxCount--;
			console.log(row,col);
		}
		//递归
		this.createLei();
	}

计算周围雷的数量并显示

1.循环之前定义的二维数组

2.如果当前元素的下标是(i,j),则左上为(i-1,j-1),上为(i-1,j ),右上为(i-1,j+1),以此类推,如下图所示:

3.分别取出这些元素,并判断他们是不是雷,如果是则计数累加,最后将计数对应到相应的图片,然后显示出来。

//计算周边雷的数量并更改对象的相关参数
	Saolei.prototype.computedLei=function(){
		var arr = this.gridArr,cell;
		for(var i=0;i<arr.length;i++){//行
			for(var j=0;j<arr[i].length;j++){//列
				cell = arr[i][j];
				if(cell.type==1){//当前是雷则直接跳过
					continue;
				}
				var count=0;
				
				//左上
				var ci = i-1,cj = j-1,ccell;
				if(ci>=0 && cj>=0){
					ccell = arr[ci][cj];
					if(ccell.type==1){
						count++;
					}
				}
				//上
				ci = i-1,cj = j,ccell;
				if(ci>=0 && cj>=0){
					ccell = arr[ci][cj];
					if(ccell.type==1){
						count++;
					}
				}
				//右上
				ci = i-1,cj = j+1,ccell;
				if(ci>=0 && cj<this.cols){
					ccell = arr[ci][cj];
					if(ccell.type==1){
						count++;
					}
				}
				//右
				ci = i,cj = j+1,ccell;
				if(cj<this.cols){
					ccell = arr[ci][cj];
					if(ccell.type==1){
						count++;
					}
				}
				//右下
				ci = i+1,cj = j+1,ccell;
				if(ci<this.rows && cj<this.cols){
					ccell = arr[ci][cj];
					if(ccell.type==1){
						count++;
					}
				}
				//下
				ci = i+1,cj = j,ccell;
				if(ci<this.rows){
					ccell = arr[ci][cj];
					if(ccell.type==1){
						count++;
					}
				}
				//左下
				ci = i+1,cj = j-1,ccell;
				if(ci<this.rows && cj >=0){
					ccell = arr[ci][cj];
					if(ccell.type==1){
						count++;
					}
				}
				//左
				ci = i,cj = j-1,ccell;
				if(cj >= 0){
					ccell = arr[ci][cj];
					if(ccell.type==1){
						count++;
					}
				}
				//设定周围雷的数量
				cell.count=count;
				
				if(count==0){//因为0那张图片下标用的9
					count=9;
				}
				//更换图片
				cell.image = this.imgObj['common'][count];
			}
		}
	}

创建遮罩

	//创建遮盖
	Saolei.prototype.createOver=function(){
		var image,img,sx=0,sy=0,sWidth=79,sHeight=79,dx=0,dy=0,dWidth=32,dHeight=32;
		image = this.imgObj['common'][10];
		var arr = this.gridArr;
		for(var i=0;i<arr.length;i++){//行
			this.overArr[i]=[];
			for(var j=0;j<arr[i].length;j++){//列
				dy = 45+i*dHeight;
				dx = 25+j*dWidth;
				img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
				img.i=i,img.j=j;
				this.renderArr.push(img);
				this.overArr[i][j]=img;
			}
		}
	}

创建计时和计数器

//创建计数和计时器
	Saolei.prototype.createCount=function(){
		//计时器
		var x=115,y=382,content=0;
		var	text = new _.Text({
			x:x,
			y:y,
			text:content,
			font:'26px ans-serif',
			textAlign:'center',
			fill:true,
			fillStyle:'white'
		});	
		this.renderArr.push(text);
		this.timeCountObj=text;
		
		x=222,y=382,content=this.leiCount;
		var	text = new _.Text({
			x:x,
			y:y,
			text:content,
			font:'26px ans-serif',
			textAlign:'center',
			fill:true,
			fillStyle:'white'
		});	
		this.renderArr.push(text);
		this.leiCountObj=text;
	}

加入鼠标移动事件

//鼠标移动事件
	Saolei.prototype.mouseMove=function(e){
		if(this.endAnimate)return ;
		
		var pos = _.getOffset(e);//获取鼠标位置
		var isCatch=false;
		if(this.reStartObj.isPoint(pos)){
			this.el.style.cursor = 'pointer';//改为手状形态
		}else{
			this.el.style.cursor = '';//改为普通形态
		}
		
		if(this.end)return ;//结束了已经
		if(!isCatch){
			//循环遮罩数组
			var arr = this.overArr,cell;
			for(var i=0;i<arr.length;i++){//行
				for(var j=0;j<arr[i].length;j++){//列
					cell = arr[i][j];
					if(cell.isPoint(pos)&& !cell.open){//鼠标捕捉,被打开的同样不捕获
						if(!cell.state){//打上标记的不做处理
							cell.image= this.imgObj['common'][11];
						}
					}else{
						if(!cell.state){//打上标记的不做处理
							cell.image= this.imgObj['common'][10];
						}
					}
				}
			}
			this.render();
		}
	}

加入鼠标点击事件

//鼠标点击事件
	Saolei.prototype.mouseClick=function(e){
		if(this.endAnimate)return ;//结束动画的时候不许点击
		
		var pos = _.getOffset(e);//获取鼠标位置
		if(this.reStartObj.isPoint(pos)){//重新开始被点击
			this.restart();
			return ;
		}
		if(this.end)return ;//结束了已经
		
		//循环遮罩数组
		var arr = this.overArr,cell,cellArr=this.gridArr;
		for(var i=0;i<arr.length;i++){//行
			for(var j=0;j<arr[i].length;j++){//列
				cell = arr[i][j];
				if(cell.isPoint(pos) && !cell.open){//鼠标捕捉,被打开的同样不捕获
					if(!this.start){
						doStart.call(this);
					}
					//移出当前对象
					cell.open=true;//被打开
					this.clearAssign(this.renderArr,cell);
					//获取对应的格子对象
					var item = cellArr[i][j];
					if(item.type==1){//如果是雷,则显示爆炸动画并提示失败
						this.boom(item);
					}else{//如不是雷
						if(item.count==0){//判断周围雷数量,如果是0则打开周围,并依次递归
							this.openOver(cell.i,cell.j);
						}
						//判断是否达到胜利的条件
						this.successOrNot();
					}
				}
			}
		}
		
		this.render();
		
		function doStart(){
			this.start=true;
			this.timmer = setInterval(function(){
				this.timmerCount++;
				this.timeCountObj.text=this.timmerCount;
				this.render();
			}.bind(this),1000);
		}
	}

成功判定1

未打开的数量与雷的数量相同

//判断是否成功
	Saolei.prototype.successOrNot=function(cell){
		var arr = this.overArr,cell,count=0;
		for(var i=0;i<arr.length;i++){//行
			for(var j=0;j<arr[i].length;j++){//列
				cell = arr[i][j];
				if(!cell.open){
					count++;
				}
			}
		}
		if(count==this.leiSucCount){//未打开的数量和雷的数量一样,表示成功
			this.end=true;
			clearInterval(this.timmer);//清除计时器的定时任务
			//打开所有的雷
			this.openAllLei();
			//显示成功表情(延时)
			setTimeout(this.endShow.bind(this,'suc'),100);
		}	
	}

成功判定2

标记为雷(插旗)的数量与类总数相同

	//判断是否成功 -根据插红旗
	Saolei.prototype.successOrNot2=function(cell){
		var arr = this.overArr,cell,count=0,gridArr = this.gridArr,item;
		var count=0;
		for(var i=0;i<arr.length;i++){//行
			for(var j=0;j<arr[i].length;j++){//列
				cell = arr[i][j];
				if(cell.state==1){//红旗
					item=gridArr[i][j];
					if(item.type==1){//正好又是雷
						count++;
					}
				}
			}
		}
		if(count==this.leiSucCount){//未打开的数量和雷的数量一样,表示成功
			this.end=true;
			clearInterval(this.timmer);//清除计时器的定时任务
			//打开所有的雷
			this.openAllLei();
			//显示成功表情(延时)
			setTimeout(this.endShow.bind(this,'suc'),100);
		}	
	}

触雷效果

鼠标点击雷后,会触发雷爆炸的一个动画,这是通过图片的切换来实现的

//爆炸效果
	Saolei.prototype.boom=function(cell){
		this.end=true;
		this.endAnimate=true;
		clearInterval(this.timmer);//清除计时器的定时任务
		//开启爆炸的动画
		this.timmer = setInterval(this.boomAnimate.bind(this,cell),100)
	}
	//爆炸动画
	Saolei.prototype.boomAnimate=function(cell){
		//切换图片
		cell.index = (cell.index || 0)+1;
		if(cell.index>this.boomCount){
			//结束动画
			clearInterval(this.timmer);
			//因为图片有些不一样,需要修正一下
			cell.sWidth=79;
			cell.sHeight=79;
			cell.image= this.imgObj['common'][18];
			//打开所有的雷
			this.openAllLei();
			//显示失败表情(延时)
			setTimeout(this.endShow.bind(this),100);
			this.endAnimate=false;
			this.render();
			return ;
		}
		//因为图片有些不一样,需要修正一下
		cell.sWidth=61;
		cell.sHeight=53;
		cell.image= this.imgObj['boom'][cell.index];
		this.render();
	}

加入鼠标右键事件

此事件是做插旗或者标记为未知等操作的。

//右键事件
	Saolei.prototype.contextMenu=function(e){
		if(this.end)return ;//结束了已经
		var e = e||window.event;
			//取消右键默认事件
		e.preventDefault && e.preventDefault();
		
		var pos = _.getOffset(e);//获取鼠标位置
		//循环遮罩数组
		var arr = this.overArr,cell,cellArr=this.gridArr;
		for(var i=0;i<arr.length;i++){//行
			for(var j=0;j<arr[i].length;j++){//列
				cell = arr[i][j];
				if(cell.isPoint(pos) && !cell.open){//鼠标捕捉,被打开的同样不捕获
					//右键切换
					if(!cell.state){//如果是没有状态的,则标记为雷,小旗
						cell.state=1;
						cell.image= this.imgObj['common'][12];
						this.leiCount--;
						this.leiCountObj.text=this.leiCount;
						//判断如果小旗数量和数据都对上了,也判断为成功
						this.successOrNot2(cell);
					}else if(cell.state==1){//如果状态为雷的,标记为未知,问号
						cell.state=2;
						cell.image= this.imgObj['common'][13];
						this.leiCount++;
						this.leiCountObj.text=this.leiCount;
					}else if(cell.state==2){//如果状态为未知的,则现在原来的
						cell.state=0;
						cell.image= this.imgObj['common'][10];
					}
				}
			}
		}
		this.render();
	}

最后加入重新开始事件,胜利和失败图片显示就完成了。

看到这里的大佬,动动发财的小手 点赞 + 回复 + 收藏 ,能关注一波就更好了。

源码下载

方式1:完整代码下载、需少量积分

方式2:关注下方公众号,回复 【 扫雷 】 下载代码

 更多源码

♥ java学生宿舍管理系统

♥ 学生成绩管理系统

♥ 基于JavaScript canvas植物大战僵尸(附源码)

♥ 老父亲给女儿做的下雪特效,满足女儿看雪的愿望(附源码)

♥ 基于canvas的九宫格抽奖特效(附源码)

♥ 抖音很火的华为太空人表盘(附源码)

♥ 基于JavaScript页面动态验证码(附源码)

♥ 基于JavaScript的俄罗斯方块小游戏(附源码)

♥ 基于JavaScript的贪吃蛇游戏(附源码)

 

以上是关于基于javascript扫雷小游戏,以前上学经常玩的主要内容,如果未能解决你的问题,请参考以下文章

运用HTML+CSS+JavaScript实现扫雷游戏

运用HTML+CSS+JavaScript实现扫雷游戏

使用 python 的单人AI 扫雷游戏

使用 python 的单人AI 扫雷游戏

完全使用 HTML/CSS 实现的经典扫雷游戏

第一次写小小小小小游戏, 扫雷