Html+css+jQuery实现扫雷游戏（二）游戏

   样式：目前将button效果替换成DIV+CSS实现，原本是利用伪类active实现点击效果，做出来后发现如果要实现，扩散效果就要每个元素都触发active，实在麻烦也不利于扩展，直接改成CSS3的动画效果，切换class的时候让div模拟被点击效果。

   扩散效果实现：因为JS是单线程的，一开始的思路是在切换样式的时候进行休眠，实现点击扩散的效果，后发现样式切换不是异步执行的，会在方法完成后一口气执行，然后查了jq的运行机制和队列和异步，发现setTimeOut是一个异步操作，我将样式切换延迟执行，因为是递归每组延迟后会产生了扩散效果。

  完成效果

采用DIV只适应布局。

	
	
	




	

		

			扫雷游戏--By七月流星
		
		

		
		

			
			

					

					
0
			
			
			

					

					
0

			

		
	
	

		
控制面板
		

			

				难度:
				初级
				中级
				高级
				自定义
			
			

				行:
				
			
			

				列:
				
			
			

				雷数:
				
			
			
点击开始游戏，即可开始扫雷
			
左键翻开格子，右键插上红旗
			
			

		
		 开始游戏
	

   页面

* {
    margin: 0;
    padding: 0;
    font-family: 微软雅黑；;
}
.main{
    margin-top: 20px;
    text-align: center;
    display:-webkit-box;
    -webkit-box-pack: center;
}
/*游戏说明*/
.GameDescription{
    width: auto;
    height: 50%;
    background: #CCC;
    border-radius: 5px;
    box-shadow: 10px 10px 10px black;
    padding: 20px;
    margin: 30px;
}
/*li去掉点*/
li{
    list-style: none;
    margin-top: 5px;
}
.setting li label{
    width: 50px;
    text-align: left;
    float: left;
}
.customize{
    display: none;
}



/*以下是游戏框*/
.GameBox{
    border: #000 3px outset;
    left: 55%;
}
.GameBox .header,.GameBox .footer{
    width:auto;
    height: 30px;
    border: 2px solid black;
    margin: 10px 30px ;
    text-align: center;
}
.GameBox .header label{
    font-size: 22px;
    font-weight: bold;
    font-family: 仿宋;
}
.GameBox .footer .timing{
    width: 100px;
    height: 30px;
    float: left;
    margin-left: 20%;
}
.GameBox .footer .timing .timeImage{
    float: left;
    width: 26px;
    height: 25px;
    background: url("image/time.jpg") no-repeat scroll -2px -2px ;
    border: 2px inset black;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
}
.GameBox .footer .timing .text_lable{
    width: 40px;
    height: 20px;
    border: 2px #1B345D inset;
    background: #848484;
    float: left;
    text-align: center;
    font-weight: bold;
    color: white;
    border-radius: 6px;
    margin-top: 3px;
    margin-left: 8px;
}


.GameBox .footer .count{
    width: 100px;
    height: 30px;
    float: right;
    margin-right:  20%;
}
.GameBox .footer .count .mineImage{
    float: right;
    width: 26px;
    height: 25px;
    background: url("image/lei.jpg") no-repeat scroll -2px -2px ;
    border: 2px inset black;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
}
.GameBox .footer .count .text_lable{
    width: 40px;
    height: 20px;
    border: 2px #1B345D inset;
    background: #848484;
    float: right;
    text-align: center;
    font-weight: bold;
    color: white;
    border-radius: 6px;
    margin-top: 3px;
    margin-right: 8px;
}

div.content{
    width:auto;
    height: auto;
    top: 50px;
    border: #999 4px inset;
    margin: 10px 30px ;
    text-align: center;
    padding-top: 1px;

}


div.hidden{
    display: inline-block;
    width: 40px; height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    border: 2px solid white;
    border-right: 2px solid #848484;
    border-bottom:2px solid #848484;
    cursor: Pointer;
    overflow: hidden;
    background: #CECFCE;

}

div.hidden:hover{
    background: #848484;
    /*border-right: 1px solid #848484;*/
    border-bottom:1px solid #848484;
}


/*红旗*/
div.flag{
    display: inline-block;
    width: 40px; height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    border: 2px solid white;
    border-right: 2px solid #848484;
    border-bottom:2px solid #848484;
    cursor: Pointer;
    overflow: hidden;
    background: url("image/flag.png") no-repeat  #CECFCE;
    background-size: 40px;
}
/*炸弹爆炸*/
div.mineBoom{
    display: inline-block;
    width: 40px; height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    cursor: default;
    color:#00CD00;
    border:2px solid #B4B4B4;
    -webkit-animation:onClick 1s ;
    -o-animation:onClick 1s  ;
    animation:onClick 1s ;
    background: url("image/mineBoom.png") no-repeat  white;
    background-size: 40px;
}

div.mine{
    display: inline-block;
    width: 40px; height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    cursor: default;
    color:#00CD00;
    border:2px solid #B4B4B4;
    -webkit-animation:onClick 1s ;
    -o-animation:onClick 1s  ;
    animation:onClick 1s ;
    background: url("image/mine.png") no-repeat  white;
    background-size: 40px;
}

/*点击效果*/
div.hidden:active{
    display: inline-block;
    width: 40px; height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    cursor: default;
    background: #CECFCE;
    color:#00CD00;
    border:2px solid #B4B4B4;
    -webkit-animation:onClick 1s ;
    -o-animation:onClick 1s  ;
    animation:onClick 1s ;
    font-size: 18px;
    font-weight: bold;
}

div.show{
    display: inline-block;
    width: 40px; height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    cursor: default;
    background: #CECFCE;
    color:#00CD00;
    border:2px solid #B4B4B4;
    -webkit-animation:onClick 1s ;
    -o-animation:onClick 1s  ;
    animation:onClick 1s ;
    font-size: 18px;
    font-weight: bold;
}
@keyframes  onClick {
    0%{
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        vertical-align: middle;
        cursor: default;
        overflow: hidden;
        border: 2px solid #848484;
        background: #CECFCE;
        color:#CECFCE;
    }
    70%   {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 2px solid white;
        border-right: 2px solid #848484;
        border-bottom:2px solid #848484;
        cursor: Pointer;
        overflow: hidden;
        background: #CECFCE;
        color:#CECFCE;
    }
}

    css

/**
  * 扫雷游戏js  七月Ne流星
 * 9*9(初级)，16*16(中级)，16*30(高级)
 *
  */
$(document).ready(function(){
    mineGame.Layout();//初始化画布
});
var mineGame={
		TIME:null,//计时对象
		TIME_COUNT:0,//计时
	    MINE_COUNT:10,//雷数暂定10
		Game_row:'9',//游戏行暂定9
		Game_col:'9',//游戏列暂定9
		MineList:new Array(this.Game_row),//游戏Model 初始化游戏行
		init:function(){//游戏初始化
            $(".content").html("");
			this.Layout();
			this.putBoom();
			this.countBoom();
			$("#countMine").html(this.MINE_COUNT);
			//开始计时
			mineGame.TIME_COUNT=0;
			this.timeCount();
		},
		Layout:function(){ //布局
			//并对数组进行初始化
	  		for(let i=0;i

"); //初始化DIV事件 this.intiEvent(i,j); } $(".content").append("
"); } }, //布雷 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);//遍历 } }, /** * * @param x * @param y * @param type 感染类型 * 0正常扩散 * 1为游戏结束 findMineAll */ infected:function(x,y){ for(let xtemp=x-1;xtemp=0 && ytemp >=0 && xtemp0 && $(id).hasClass("hidden") ){ this.removeBtn(id,num); }else if(this.MineList[xtemp][ytemp] == 0 && $(id).hasClass("hidden") ){// $(id).length > 0判断元素是否存在 this.removeBtn(id,num); let _this=this; setTimeout(function () { _this.openBtn(xtemp,ytemp); }, 120);//加入任务队列实现扩散效果。 } } } } } }, gameOverEvent:function(){ let count=0; for(let i=0;i=0 && ytemp >=0 && xtemp0 && $(id).hasClass("hidden") ){ this.removeBtn(id,num); }else if(this.MineList[xtemp][ytemp] == 0 && $(id).hasClass("hidden") ){// $(id).length > 0判断元素是否存在 this.removeBtn(id,num); let _this=this; setTimeout(function () { _this.openBtn(xtemp,ytemp); }, 120);//加入任务队列实现扩散效果。 } } } } } }, //计时器 timeCount:function () { mineGame.TIME_COUNT++; $("#time").text( mineGame.TIME_COUNT); mineGame.TIME=setTimeout("mineGame.timeCount()",1000); }, //停止计时 stopCount:function () { clearTimeout( mineGame.TIME); } }; $("#start").click(()=>{ let val=$("input[name=level]:checked").val(); switch (val){ case "1": mineGame.Game_row=9; mineGame.Game_col=9; mineGame.MINE_COUNT=10; break; case "2": mineGame.Game_row=16; mineGame.Game_col=16; mineGame.MINE_COUNT=40; break; case "3": mineGame.Game_row=16; mineGame.Game_col=30; mineGame.MINE_COUNT=99; break; case "4": mineGame.Game_row=$("#row").val(); mineGame.Game_col=$("#col").val(); mineGame.MINE_COUNT=$("#count").val(); break; } mineGame.init(); }); /** * 显示自定义 */ $("[name='level']").click(()=>{ let isShow=$(".customize").is(":hidden");//是否隐藏 let val=$("input[name=level]:checked").val(); if(val=='4'){ $(".customize").fadeIn(1000); }else{ $(".customize").fadeOut(1000); } }); //阻止浏览器默认右键点击事件 document.oncontextmenu = function() { return false; }