Html+css+jQuery实现扫雷游戏(一)初步设计

   最近学习前端内容,主要以H5、CS3为主,该代码是博主利用课余时间完成,并会逐步完善。
   博主是JAVA程序员。该游戏是使用面向对象思维来写的。所以如果你是新手并且想从我的代码中学到什么,要先了解下面向对象(OOP)思维。 


      扫雷游戏 分析设计(MVC设计
      是一个由9*9(初级),16*16(中级),16*30(高级)行列的表格组成的游戏。
      View  css 布局设计  
      1、可以直接使用table完成布局
      2、div-box浮动布局(我采用这种布局,并且在之后的学习看能不能改成响应式布局)
     
      Controller 控制器设计
      1、使用jQuery控制,面向对象写法
      Model 模型设计
      从 9*9 可以看出能用二维数组作为模型元素

      其中 -1为炸弹

index页面

<!DOCTYPE html>
<html>
<head>
	<title>扫雷游戏</title>
	<meta charset="utf-8" />
	<style type="text/css">
		div.header{//头部

		}
		div.content{
			width: 900px;
			height: 900px;
			border: 1px solid black;
			margin: auto;

		}
		div.footer{

		}
		div.box{
			width: 98px;
			height:98px;
			border: 1px solid red;
			background: #F5F5F5;
			float: left;
			display: -webkit-box;
			-webkit-box-pack:center;
			-webkit-box-align:center;

		}
		div.box button{
			width: 98px;
			height:98px;
		}
		div.box span{
			font-weight: bold;
		}
		div.box .span1{
			color: #FFA500;
		}
		div.box .span2{
			color: #FF4500;
		}
		div.box .span3{
			color: #DA70D6;
		}
		div.box .span4{
			color: #FF0000;
		}
		div.box .boom{
			color:black;
		}
	</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
<script src="jquery-3.1.0.min.js">
</script>
<script type="text/javascript" src="mineGame.js"></script>
mineGame.js
/**
  * 扫雷游戏js  七月Ne流星
 * 9*9(初级),16*16(中级),16*30(高级)
  */
var mineGame={
	    MINE_COUNT:10,//雷数暂定10
		Game_row:'9',//游戏行暂定9
		Game_col:'9',//游戏列暂定9
		MineList:new Array(this.Game_row),//游戏Model 初始化游戏行
		init:function(){//游戏初始化
			this.Layout();
			this.putBoom();
			this.countBoom();
		},
		Layout:function(){ //布局
			//并对数组进行初始化
	  		for(let i=0;i<this.Game_row;i++){//行
				this.MineList[i]=new Array(this.Game_col);//初始化游戏列
	  			for(let j=0;j<this.Game_col;j++){//列
	  				//对数组进行初始化
	  				this.MineList[i][j]=0;
					$(".content").append("<div class='box' ><button   id='"+i+"-"+j+"' onclick='mineGame.openBtn("+i+","+j+")'></button></div>");
	  			}
	  		}
		},
		//布雷
		putBoom:function(){
			let i=0,x,y;
			for(;i<this.MINE_COUNT;){
				//随机数
				x=Math.floor(Math.random()*this.Game_row);
				y=Math.floor(Math.random()*this.Game_col);
				if(this.MineList[x][y]!=-1){//
					this.MineList[x][y]=-1;
					i++;
				}
			}
		},
		countBoom:function(){//算出炸弹旁边的数字
			for(let row=0;row<this.Game_row;row++){//行
				for(let col=0;col<this.Game_col;col++){
					if(this.MineList[row][col] ==-1){//如果这格刚刚好是炸弹
						//对它周围的数组+1
						for(let x=row-1;x<row+2;x++){
							for(let y=col-1;y<col+2;y++){
								if(x >=0 && y >=0 && x<this.Game_row && y<this.Game_col){//判断出画布大小
		 							if (this.MineList[x][y]!=-1) this.MineList[x][y]++;
		 						}
							}
						}
					}
				}
			}
			console.log(this.MineList);
		},
		openBtn:function(x,y){//打开按钮
			 let id="#"+x+"-"+y;
			 let num=this.MineList[x][y];//当前数目
			 if (num==-1) {
			 	alert("Game Over!");
			 }else if(num>0){
			 	this.removeBtn(id,num);
			 }else if(num==0){
                 this.removeBtn(id,num);
			 	this.infected(x,y);//遍历
			 }	
		},
		infected:function(x,y){
			for(let xtemp=x-1;xtemp<x+2;xtemp++){//判断行
		 		for(let ytemp=y-1;ytemp<y+2;ytemp++){//判断列
		 			if(xtemp >=0 && ytemp >=0 && xtemp<this.Game_row &&  ytemp<this.Game_col){//判断出画布大小
		 				if(this.MineList[xtemp][ytemp]!=-1){//如果不是炸弹
                           	 let id="#"+xtemp+"-"+ytemp;
                          	  let num=this.MineList[xtemp][ytemp];//当前数目
		 						if(xtemp==x && ytemp==y){
		 						}else if(this.MineList[xtemp][ytemp] >0 &&  $(id).length > 0 ){
		 								this.removeBtn(id,num);
		 						}else if(this.MineList[xtemp][ytemp] == 0 &&  $(id).length > 0 ){// $(id).length > 0判断元素是否存在
                                    this.removeBtn(id,num);
		 							this.openBtn(xtemp,ytemp);		 						
		 						}
		 				}

		 			}
		 		}
		 	}
		},
		removeBtn:function(id,num){
	    	let parent= $(id).parent();//获取该button的父级div
              $(id).remove();
            parent.append(num);//将附近炸弹数画出来
		}

};

$(document).ready(function(){
		mineGame.init();//初始化
});

效果图





展开阅读全文

没有更多推荐了,返回首页