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

最新推荐文章于 2024-05-13 13:40:59 发布
最新推荐文章于 2024-05-13 13:40:59 发布
阅读量887 收藏 5
点赞数 2
分类专栏： web前端 设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16882073/article/details/79058082
版权
   样式：目前将button效果替换成DIV+CSS实现，原本是利用伪类active实现点击效果，做出来后发现如果要实现，扩散效果就要每个元素都触发active，实在麻烦也不利于扩展，直接改成CSS3的动画效果，切换class的时候让div模拟被点击效果。


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

  完成效果


采用DIV只适应布局。


<!DOCTYPE html>
<html>
<head>
	<title>扫雷</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="myGame.css">
</head>
<body>
<div class="main">

	<div class="GameBox">
		<div class="header">
			<label>扫雷游戏--By七月流星</label>
		</div>
		<div class="content" οnkeyup="">
		</div>
		<div class="footer">
			<!-- 计时 -->
			<div class="timing">
					<div class="timeImage"></div>
					<div class="text_lable" id="time">0</div>
			</div>
			<!-- 计数-->
			<div class="count">
					<div class="mineImage"></div>
					<div class="text_lable" id="countMine">0</div>

			</div>

		</div>
	</div>
	<div class="GameDescription">
		<h2>控制面板</h2>
		<ul  class="setting">
			<li>
				<label>难度:</label>
				<input type="radio" name="level" value="1" checked="checked"/>初级
				<input type="radio" name="level" value="2"/>中级
				<input type="radio" name="level" value="3"/>高级
				<input type="radio" name="level" value="4" />自定义
			</li>
			<li class="customize">
				<label>行:</label>
				<input type="number" id="row"/>
			</li>
			<li class="customize">
				<label>列:</label>
				<input type="number"  id="col"/>
			</li>
			<li class="customize">
				<label>雷数:</label>
				<input type="number"  id="count"/>
			</li>
			<li>点击开始游戏，即可开始扫雷</li>
			<li>左键翻开格子，右键插上红旗</li>
			<!--<li>左右键同时点击数字，可翻开数字周围格子</li>-->
			<li></li>
		</ul>
		<button style="height: 25px" id="start"> 开始游戏</button>
	</div>

</div>



</body>
</html>
<script src="jquery-3.1.0.min.js">
</script>
<script type="text/javascript" src="mineGame.js"></script>
   页面 

* {
    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<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='hidden'  id='"+i+"-"+j+"'  ></div>");
					//初始化DIV事件
					this.intiEvent(i,j);
	  			}
                $(".content").append("<br/>");
	  		}
		},
		//布雷
		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]++;
		 						}
							}
						}
					}
				}
			}

		},
		openBtn:function(x,y,){//打开按钮
			 let id="#"+x+"-"+y;
			 let num=this.MineList[x][y];//当前数目
			 if (num==-1) {
			 	mineGame.stopCount();//停止计时
                 $(id).attr('class','mineBoom');
                 this.gameOverEvent(x,y);
			 	alert("Game Over!");
			 }else if(num>0){
			 	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<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){//判断出画布大小
                        let id="#"+xtemp+"-"+ytemp;
		 				if(this.MineList[xtemp][ytemp]!=-1){//如果不是炸弹

                          	  let num=this.MineList[xtemp][ytemp];//当前数目
		 						if(xtemp==x && ytemp==y){
		 						}else if(this.MineList[xtemp][ytemp] >0 && $(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<this.Game_row;i++){
				for (let j=0;j<this.Game_col;j++){
              		  let id="#"+i+"-"+j;
                    if(this.MineList[i][j]==-1 && !$(id).hasClass("mineBoom") ){//如果不是炸弹
                        setTimeout(function () {
                        	$(id).attr('class','mine');
                        	}, 120*count);//加入任务队列实现扩散效果。
                        count++;
                    }
				}
			}
		},
		removeBtn:function(id,num){//移除格子
            $(id).attr('class','show');    f(num!=0)$(id).html(num);
		},
		//初始化事件
		intiEvent:function (x,y) {
            let id="#"+x+"-"+y;
            /**
			 * 左键单机
			 * 右键
			 * 左右按键
             */
            $(id).mousedown(function(e) {
                //右键为3
                if (3 == e.which) {
                    mineGame.isFlag(id);
                } else if (1 == e.which) {
                    //左键为1
					//是hidden状态的才能触发效果
                    if($(id).hasClass("hidden"))  mineGame.openBtn(x,y);
                } else if(e.which == 2){
                    //鼠标滚轮按下事件为2
                }
            });

            $(id).dblclick(function(){
                alert("双击了");
            });
			
        },//判断是否是flag
   		isFlag(id){
        //如果是隐藏的那就加上旗帜，否则相反
        if( $(id).hasClass("hidden")){
            $(id).attr('class','flag');
            mineGame.MINE_COUNT--;
        }else if($(id).hasClass("flag") ){
            $(id).attr('class','hidden');
            mineGame.MINE_COUNT++;
        }
        $("#countMine").html(this.MINE_COUNT);
    },
    /**
     *
     * @param x
     * @param y
     * @param type 感染类型
     *  0正常扩散
     *  1为游戏结束 findMineAll
     */
    scan: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){
                    let id="#"+xtemp+"-"+ytemp;
                    if(this.MineList[xtemp][ytemp]!=-1){//如果不是炸弹

                        let num=this.MineList[xtemp][ytemp];//当前数目
                        if(xtemp==x && ytemp==y){
                        }else if(this.MineList[xtemp][ytemp] >0 && $(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;
}


得意

七月Ne流星
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用HTML和jquery写一个简单的扫雷小游戏
grey_liu的博客
10-27 661
用HTML和jquery写一个简单的扫雷小游戏代码如下效果如下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扫雷3.0</title> <script src="jquery-1.11.0.js"></script> <style> .button{
扫雷游戏javascript html
GS2016的博客
01-12 598
地雷游戏                      .guoshengcontentdiv{                 width:1255px;                 height:600px;                 margin:auto;             }             .guoshengonediv {           
扫雷（HTML+JS+CSS）
03-13
LZ写的一个扫雷的小游戏，附上代码。代码文件与引用的图片都放在了同级的文件夹下，读者如需要可以自行调整位置。
基于qt的扫雷游戏_HTML + CSS 实现的扫雷游戏
weixin_39621975的博客
11-21 65
小金子读完需要2分钟速读仅需 1 分钟大家好，我是你们的小金子。今天推荐的工具是「css-sweeper」，一个 HTML + CSS 实现的扫雷游戏，没有使用 JavaScript。胜利条件：当你点开一个空白区域时，因为清除所有空格是不现实的，胜利条件被简化为：标记所有的炸弹不标记非炸弹这也让你能够在基于完全猜测的情况下获胜，因为你可以不带任何后果地进行标记。如果你选择正确并且没有标记...
jquery在线扫雷
weixin_33814685的博客
07-14 119
《扫雷》是一款大众类的益智小游戏，于1992年发行。游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子，同时避免踩雷。在线试玩 http://hovertree.com/texiao/game/7/鼠标左键标记非雷格子，右键标记地雷。如果左键点到地雷游戏失败。 这是何问起扫雷成功的一个例子：HTML文档代码如下： &lt;!DOCTYPE html&gt; &lt;html&...
扫雷游戏 - jQuery实现
ZPan的博客
04-24 893
使用jQuery，HTML5，CSS3实现经典扫雷游戏
html实现扫雷游戏
09-25
通过html+css+jquery实现经典扫雷游戏，可以直接在浏览器上运行
jquery实现的网页版扫雷小游戏源码.zip
11-15
《jQuery实现的网页版扫雷小游戏详解》 在IT领域，JavaScript库如jQuery极大地简化了网页开发中的DOM操作，事件处理以及动画效果等任务。本篇文章将深入探讨一个使用jQuery实现的网页版扫雷小游戏的源码分析，帮助...
基于jQuery实现经典扫雷游戏特效源码.zip
11-21
【标题】"基于jQuery实现经典扫雷游戏特效源码.zip" 涉及的主要知识点是使用JavaScript库jQuery来创建一个互动的扫雷游戏，其中包括了HTML布局、CSS样式设计以及JavaScript编程逻辑。jQuery是一个广泛使用的...
html版扫雷
08-23
html版 扫雷
HTML+css+jQuery实现导航栏效果--pc端
06-15
HTML+css+jQuery实现导航栏效果--pc端 适合前端，下载即可使用。 $(function(){ // 鼠标移入事件 $('.nav>li').mousemove(function(){ $(this).addClass('active').siblings('li').removeClass('active') // 为li添加名为active的class，并移除兄弟元素（li）上的名为active的class名 $(this).children('.level').css("display","block"); // 使li的子元素level显示 }) // 鼠标移出事件 $('.nav>li').mouseleave(function(){ $(this).children('.level').css("display","none"); //使li的子元素level显示 }) })
Html+Css+js+jquery实现简单页面的登录
03-15
Html+Css+js+jquery实现简单页面的登录
HTML+CSS3+原生JS+JQuery学习笔记(详细)
11-19
自己学习时候做的笔记，非常详细超过2000行的文本内容，并且附带有部分代码案例，平时做开发的时候，基础语法用法等查询非常方便。
jQuery实现的经典扫雷游戏源码.zip
11-07
总之，jQuery实现的扫雷游戏是一个结合HTML、CSS和JavaScript的综合实践项目。通过这个过程，开发者不仅可以深化对jQuery的理解，还能锻炼解决问题和优化代码的能力。实际操作中，应结合个人技能和需求进行适当的...
html+css+jquery----简单博客网页练习
苏灵均的博客
06-22 794
跟着自学网的教程，敲的一个自学网的网页。前面有详细解释，源码在最后部分。
HTML版扫雷
qq_44394562的博客
05-30 2695
页面初始化界面： 踩雷结束游戏图： 直接上HTML代码！ <!DOCTYPE html> <html lang='zh'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>扫雷</title> <style> html, body{
2024年前端最新HTML+CSS+JS+Jquery+练手项目+，面试知识及准备
最新发布
2401_84437530的博客
05-13 895
=======非常实用的教程+案例，均有详细的步骤讲解，不懂得可以私信博主，看到就会回的！一、HTML一、二、三、四、五、六、七、八、九、十、二、CSS一、二、三、四.、五、六、七、九.十.十一.十二.三、JavaScript。
html+css+jquery时钟
子非鱼的博客
05-11 124
业余娱乐，手写时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D
HTML5+CSS3+jQuery构建视频播放器教程
“HTML5+CSS3+jQuery制作视频播放器完全指南” 在当前的技术趋势下，HTML5已经逐渐成为网页开发的主流标准，特别是在视频播放领域。随着Flash的逐渐淘汰，许多知名的视频平台如YouTube已经转向HTML5播放器。尽管...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值