Hello,World.
上线啦！上线啦！
今天土土给大家分享的是用jquery的click()事件来简单模拟打地鼠游戏
那让我们开始吧
首页(index.html)
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
</head>
<body style="background-image: url(img/index.jpg);">
<div style="text-align: center;">
<p style="font-size: 50px;">游戏首页</p>
<div>
<img src="img/timg.gif">
<a href="first.html" style="text-decoration: none;font-size: 40px;background: red;color: white;">
打地鼠
</a>
<img src="img/timg.gif">
</div>
</div>
</body>
</html>第一关（first.html）【主要，其余几关类似。主要改变监听的时间以及游戏范围】
第一关效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打地鼠第一关</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
i=-1;
$("#yx ,#img").click(function(){
if($("#cg").html()==20) {//20下就通关
alert("通关")
$(location).attr('href','second.html'); //跳转到第二关
}
$("#img").show();
var width=new Array("0px","150px","300px","450px");//横坐标数组
var height=new Array("0px","150px","300px","450px");//纵坐标数组
var width1=parseInt(Math.random() * width.length); //随机横坐标
var height1=parseInt(Math.random() * height.length); //随机纵坐标
$("#img").css("margin-left",width[width1]);//图像的横坐标
$("#img").css("margin-top",height[height1]);//图像的纵坐标
i ;//成功次数增加
$("#cg").html(i);//成功次数刷新
// 放在点击事件里面防止未开始游戏就超时
let currtentTime = new Date().getTime(),//记录当前时间毫秒数
lastTime = new Date().getTime(), //记录上一次操作的毫秒数
diff = 4000;//指定时间
$(document).on('mousedown',function(){//指定时间没有点击就执行函数
lastTime = new Date().getTime();//记录上一次操作的毫秒数
});
let timer = setInterval(function(){ //定时器
currentTime = new Date().getTime();//记录当前时间毫秒数
if(currentTime - lastTime > diff){//没有操作的时间与指定时间的比较
alert("超时，游戏结束")
window.location.reload();//刷新页面
clearInterval(timer);//清除定时器
}
},1000);
})
})
</script>
</head>
<body>
<!-- 游戏区域 -->
<div style="display: flex;margin-top: 82px;margin-left: 87px;">
<button id="yx"style="background-image: url(img/hb.gif);color: white;">游戏开始</button>
<p style="margin-top: 292px;">成功打中<span id="cg">0</span>次(打中20次通关)</p>
<div style="width: 600px;height: 600px;border: 1px solid red;background-image: url(img/first.gif);">
<img id="img"src="img/2.png" style="display: none;width: 150px;height: 150px;">
</div>
<img src="img/fi.gif">
</div>
</body>
</html>
第二关（second.html）
第二关效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打地鼠第二关</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
i=-1;
$("#yx ,img").click(function(){
if($("#cg").html()==20) {
alert("通关")
$(location).attr('href','three.html'); //跳转到指定目录，较第一关改变的地方
}
$("img").show();
var width=new Array("0px","150px","300px","450px","600px","750px");//横坐标数组
//较第一关改变的地方
var height=new Array("0px","150px","300px","450px");//纵坐标数组
var width1=parseInt(Math.random() * width.length); //随机横坐标
var height1=parseInt(Math.random() * height.length); //随机纵坐标
$("img").css("margin-left",width[width1]);//图像的横坐标
$("img").css("margin-top",height[height1]);//图像的纵坐标
i ;//成功次数增加
$("#cg").html(i);//成功次数刷新
let currtentTime = new Date().getTime(),//记录当前时间毫秒数
lastTime = new Date().getTime(), //记录上一次操作的毫秒数
diff = 3000;//指定时间
$(document).on('mousedown',function(){//指定时间没有点击就执行函数
lastTime = new Date().getTime();//记录上一次操作的毫秒数
});
let timer = setInterval(function(){ //定时器
currentTime = new Date().getTime();//记录当前时间毫秒数
if(currentTime - lastTime > diff){//没有操作的时间与指定时间的比较
alert("超时，游戏结束")
window.location.reload();
clearInterval(timer);//清除定时器
}
},1000);
})
})
</script>
</head>
<body>
<!-- 游戏区域 -->
<div style="display: flex;margin-top: 82px;margin-left: 87px;" >
<button id="yx" style="background-image: url(img/2.gif);color: white;">游戏开始</button>
<p style="margin-top: 292px;">成功打中<span id="cg">0</span>次(打中20次通关)</p>
<div style="width: 900px;height: 600px;border: 1px solid red;background-image: url(img/2.jpg);">
//较第一关改变的地方
<img src="img/3.png" style="display: none;width: 150px;height: 150px;">
</div>
</div>
</body>
</html>
第三关（three.html）
第三关效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打地鼠第三关</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
i=-1;
$("#yx ,img").click(function(){
if($("#cg").html()==20) {
alert("通关")
$(location).attr('href','four.html'); //跳转到指定目录，较第一关改变的地方
}
$("img").show();
var width=new Array("0px","150px","300px","450px","600px","750px","900px","1050px");//横坐标数组
//较第一关改变的地方
var height=new Array("0px","150px","300px","450px");//纵坐标数组
var width1=parseInt(Math.random() * width.length); //随机横坐标
var height1=parseInt(Math.random() * height.length); //随机纵坐标
$("img").css("margin-left",width[width1]);//图像的横坐标
$("img").css("margin-top",height[height1]);//图像的纵坐标
i ;//成功次数增加
$("#cg").html(i);//成功次数刷新
let currtentTime = new Date().getTime(),//记录当前时间毫秒数
lastTime = new Date().getTime(), //记录上一次操作的毫秒数
diff = 2000;//指定时间
$(document).on('mousedown',function(){//指定时间没有点击就执行函数
lastTime = new Date().getTime();//记录上一次操作的毫秒数
});
let timer = setInterval(function(){ //定时器
currentTime = new Date().getTime();//记录当前时间毫秒数
if(currentTime - lastTime > diff){//没有操作的时间与指定时间的比较
alert("超时，游戏结束")
window.location.reload();
clearInterval(timer);//清除定时器
}
},1000);
})
})
</script>
</head>
<body>
<!-- 游戏区域 -->
<div style="display: flex;margin-top: 82px;margin-left: 87px;">
<button id="yx" style="background-image: url(img/blue.gif);color: white;">游戏开始</button>
<p style="margin-top: 292px;">成功打中<span id="cg">0</span>次(打中20次通关)</p>
<div style="width: 1200px;height: 600px;border: 1px solid red;background-image: url(img/3.jpg);">
//较第一关改变的地方
<img src="img/4.png" style="display: none;width: 150px;height: 150px;">
</div>
</div>
</body>
</html>
第四关（four.html）
第四关效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打地鼠第四关</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
i=-1;
$("#yx ,img").click(function(){
if($("#cg").html()==20) {
if(confirm('全部通关.是否回首页？')){
$(location).attr('href','index.html'); //跳转到指定目录，较第一关改变的地方
}
}
$("img").show();
var width=new Array("0px","150px","300px","450px","600px","750px","900px","1050px","1200px","1350");//横坐标数组
//较第一关改变的地方
var height=new Array("0px","150px","300px","450px");//纵坐标数组
var width1=parseInt(Math.random() * width.length); //随机横坐标
var height1=parseInt(Math.random() * height.length); //随机纵坐标
$("img").css("margin-left",width[width1]);//图像的横坐标
$("img").css("margin-top",height[height1]);//图像的纵坐标
i ;//成功次数增加
$("#cg").html(i);//成功次数刷新
let currtentTime = new Date().getTime(),//记录当前时间毫秒数
lastTime = new Date().getTime(), //记录上一次操作的毫秒数
diff = 1000;//指定时间
$(document).on('mousedown',function(){//指定时间没有点击就执行函数
lastTime = new Date().getTime();//记录上一次操作的毫秒数
});
let timer = setInterval(function(){ //定时器
currentTime = new Date().getTime();//记录当前时间毫秒数
if(currentTime - lastTime > diff){//没有操作的时间与指定时间的比较
alert("超时，游戏结束")
window.location.reload();
clearInterval(timer);//清除定时器
}
},1000);
})
})
</script>
</head>
<body>
<!-- 游戏区域 -->
<div style="display: flex;margin-top: 82px;margin-left: 87px;">
<button id="yx" style="background-image: url(img/h.gif);color: white;">游戏开始</button>
<p style="margin-top: 292px;">成功打中<span id="cg">0</span>次(打中20次通关)</p>
<div style="width: 1500px;height: 600px;border: 1px solid red;background-image: url(img/4.jpg);">
//较第一关改变的地方
<img src="img/1.png" style="display: none;width: 150px;height: 150px;">
</div>
</div>
</body>
</html>
图片文件（img）
链接：https://pan.baidu.com/s/1bv_n8fpHkCsI9OfrgyHlFA
提取码：0725
收尾完成。
收工。
有兴趣的同学可以关注微信公众号三人之一。
