<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
</head>
<style>
html,body{
height: 100%;
transform-style:preserve-3d;
background: linear-gradient(to bottom,blue,#fff);
overflow: hidden;
background: url(img/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(img/cao.jpg);
}
.show{
background:url(img/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(img/shizhong.jpg) no-repeat;
color: #fff;
}
.flagbox{
width: 40px;
height: 40px;
padding: 5px;
background: url(img/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(img/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.call(this); //将this指针保存到leftclick上
}else if(e.which==3){
rightclick.call(this); // 将this指针保存到rightclick上
}
}
function leftclick(){
if($(this).hasClass("flag")){ //右击后不能左击
return;
}
if($(this).hasClass("lei")){
clearInterval(t);
alert("Game Over!"); //左击点到雷 游戏结束
// $(".block").filter(":not(lei)").addClass("num");
$(".lei").addClass("show"); //所有的雷显示
}else{
var n=0; //如果点到的不是雷，显示出他旁边雷的个数
var pos=$(this).data("pos");
// console.log(pos.x);
$(this).addClass("num");
for(var i=pos.x-1;i<=pos.x+1;i++){
for(var j=pos.y-1;j<=pos.y+1;j++){
if($("#"+i+"-"+j).hasClass("lei")){
n++;
}
}
}
$(this).text(n);
if(n==0){
for(var i=pos.x-1;i<=pos.x+1;i++){
for(var j=pos.y-1;j<=pos.y+1;j++){
if($("#"+i+"-"+j).length!=0){
if(!$("#"+i+"-"+j).data("check")){
$("#"+i+"-"+j).data("check",true);
leftclick.call($("#"+i+"-"+j)[0]);
}
}
}
}
}
}
}
function rightclick(){
if($(this).hasClass("num")){ //有数字的不能够再次右击
return;
}
if($(this).hasClass("flag")){
$(".flagbox").text(function(index,num){
num=parseInt(num);
return ++num;
})
}else{
if($(".flag").length==10){
return;
}
$(".flagbox").text(function(index,num){
num=parseInt(num);
return --num;
})
}
$(this).toggleClass("flag"); //右击切换flag类名
if($(".flag").filter(".lei").length==10){
clearInterval(t);
alert("Success!");
}
}
var t=setInterval(function(){ //计时器
$(".time").text(function(index,n){
return --n;
})
if($(".time").text()==0){
clearInterval(t);
alert("时间到，游戏结束！");
}
},1000)
})
</script>
<body>
<div class="box"></div>
<div class="flagbox">10</div>
<div class="time">100</div>
</body>
</html>
jquery实现的网页版扫雷小游戏源码.zip
版权申诉
143 浏览量
2022-11-07
23:57:59
上传
评论
收藏 193KB ZIP 举报
jquery实现的网页版扫雷小游戏源码.zip （7个子文件） 
132689850627637019 img 
cao.jpg 73KB shizhong.jpg 14KB dilei.jpg 16KB hongqi.jpg 14KB bg.jpg 62KB
index.html 5KB js 
jquery.min.js 91KB资源评论
