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页面

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

"); } } }, //布雷 putBoom:function(){ let i=0,x,y; for(;i=0 && y >=0 && x0){ 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=0 && ytemp >=0 && xtemp0 && $(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();//初始化 });

效果图