js实现扫雷小游戏-html代码-BFW代码库

js实现扫雷小游戏

代码语言：html

所属分类：游戏

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>jquery网页版扫雷小游戏</title>
	
	<script src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
	
</head>
<style>
     html,body{
     	height: 100%;
     	transform-style:preserve-3d;
     	background: linear-gradient(to bottom,blue,#fff);
     	overflow: hidden;
     	background: url(http://repo.bfw.wiki/bfwrepo/image/saolei/bg.jpg) no-repeat;
     }
	.box{
		transform:perspective(800px) rotatex(45deg);
		width: 500px;
		height:500px;
		margin: 20px auto;
		border-top: 1px solid #B25F27;
		border-left: 1px solid #B25F27;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	}
	.block{
		width: 49px;
		height: 49px;
		border-right:1px solid #B25F27;
		border-bottom:1px solid #B25F27;
		float: left;
		box-shadow: 0 0 4px #333 inset;  /*内阴影*/
		background:  url(http://repo.bfw.wiki/bfwrepo/image/saolei/cao.jpg);

	}
	.show{
		background:url(http://repo.bfw.wiki/bfwrepo/image/saolei/dilei.jpg) no-repeat;
	}
	.num{
		background: #ECD0A1;
		font-size: 18px;
		/*color: #fff;*/
		font-weight: bold;
		text-align: center;
		line-height: 49px;
	}
	.time{
		width: 50px;
		height: 50px;
		border: 1px solid red;
		text-align: center;
		line-height: 50px;
		font-size: 20px;
		font-weight: bold;
		font-family: "微软雅黑";
		position: absolute;
		right: 20px;
		top: 50px;
		background: url(http://repo.bfw.wiki/bfwrepo/image/saolei/shizhong.jpg) no-repeat;
		color: #fff;
	}
	.flagbox{
		width: 40px;
		height: 40px;
		padding: 5px;
		background: url(http://repo.bfw.wiki/bfwrepo/image/saolei/hongqi.jpg) no-repeat;
		border: 1px solid red;
		position: absolute;
		right: 20px;
		top: 120px;
		text-align:center;
		line-height: 50px;
		font-size: 20px;
		font-weight: bold;
		font-family: "微软雅黑";

	}

	.flag{
		background: url(http://repo.bfw.wiki/bfwrepo/image/saolei/hongqi.jpg) no-repeat;
	}
</style>
<script>
	$(function(){
	do{
		//用两个循环创建100个块，并且随机产生10个加一个雷的类名
		//给每个块添加位置数据 和 id属性 鼠标按下事件
		$(".box").empty();
		for(var i=0;i<10;i++){
			for(var j=0;j<10;j++){
				var islei=Math.random()>0.9;
				$("<div></div>").addClass(function(){
					return "block"+(islei? " lei":"");
				}).data("pos",{x:i,y:j}).attr("id",i+"-"+j).mousedown(mousedownhandler).appendTo(".box");
			}
		}
	}while($(".lei").length!=10);
		$(document).on("contextmenu",false);  //右击浏览器弹出窗口事件 被 contextmenu事件冲掉
		function mousedownhandler(e){
			e.preventDefault();
			if(e.which==1){                   //区分左击和右击事件
				leftclick.c.........完整代码请登录后点击上方下载按钮下载查看