二话不说,直接上代码...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<mata charset = "utf-8" />
<title>打地鼠</title>
<script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#background{
background: url(img/20171013151955664.jpg);
}
h2{
font-family: "微软雅黑";
font-size: 30px;
padding-left: 100px;
}
table td{
width: 100px;
height: 100px;
}
img{
margin-top: 31px;
}
#content{
z-index: 1;
margin-left: 40%;
}
#count{
width: 320px;
height: 40px;
background-color:#E8E8E8;
padding-left: 0px;
text-align: center;
color: red;
font-size: 18px;
line-height: 30px;
font-family: "微软雅黑";
}
#count .score{
text-align: center;
color: lightgreen;
font-size: 20px;
line-height: 30px;
font-family: "微软雅黑";
}
#history #id{
text-align: center;
color: lightgreen;
font-size: 20px;
line-height: 30px;
font-family: "微软雅黑";
}
#history{
position: absolute;
top:60px;
right:240px;
width: 180px;
height: 90px;
background-color: #E8E8E8;
color: lightblue;
font-size:20px;
line-height: 80px;
text-align: center;
}
.clock{
position: absolute;
top:0px;
right:240px;
width: 180px;
height: 60px;
background-color: lightblue;
color: red;
font-size: 20px;
text-align: center;
line-height: 60px;
}
#cover{
margin-top: 0px;
position: absolute;
z-index: 2;
width: 800px;
height: 600px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
background :rgba(128,128,128,0.5);
color: red;
font-size: 30px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div id = "content">
<h2>打地鼠</h2><br/>
<table id = "background">
<tr>
<td><img src="img/20171013151955664.jpg" ></td>
<td><img src="img/20171013151955664.jpg" ></td>
<td><img src="img/20171013151955664.jpg" ></td>
</tr>
<tr>
<td><img src="img/20171013151955664.jpg" ></td>
<td><img src="img/20171013151955664.jpg" ></td>
<td><img src="img/20171013151955664.jpg" ></td>
</tr>
<tr>
<td><img src="img/20171013151955664.jpg" ></td>
<td><img src="img/20171013151955664.jpg" ></td>
<td><img src="img/20171013151955664.jpg" ></td>
</tr>
</table>
<div id = "count">当前得分 ：<span class = "score"> 0 </span>分</div>
<div id = "history">最佳记录: <span id = "score1"> 0 </span>分</div>
<div class = "clock"></div>
</div>
<div id = "cover" style="display:none"> <span id = "text"></span></div>
<script type="text/javascript">
//1 先获取到所有的坑(图片)
var content = document.getElementById('content');
var cover = document.getElementById('cover');
var image = document.getElementsByTagName('img');
var countMouse = document.getElementById('count');
var score = countMouse.querySelector(".score");
var history = document.getElementById("history");
var score1 = document.getElementById("score1");
var div = document.querySelector(".clock");
var text = document.getElementById("text");
var preScore = 0;
var ranK;
var count = 0;
// localStorage.removeItem("bestScore");
// localStorage.removeItem("scoreshow");
preScore = localStorage.getItem("bestScore");
console.log(preScore);
score1.innerHTML = preScore;
//让老鼠随机出现在一个坑里
setTimeout("chulai()",Math.random()*400+800);
//地鼠出没时间
function chulai(){
try{
ranK = Math.floor(Math.random() * 9);
image[ranK].src = "img/20171013152015812.jpg";
image[ranK].style.marginTop = "0px";
image[ranK].setAttribute("onclick","die()");
setTimeout("paole()", Math.random()*300+500);
}catch(ex){}
}
//2 老鼠回去了
function paole(){
try{
image[ranK].src = "img/20171013151955664.jpg";
image[ranK].style.marginTop = "31px";
image[ranK].removeAttribute("onclick");
setTimeout("chulai()", Math.random()*400+800);
}catch(ex){}
}
//3 老鼠被打死了
function die(){
try{
image[ranK].src = "img/20171013152030215.jpg";
image[ranK].removeAttribute("onclick");
image[ranK].style.marginTop = "3px";
count++;
score.innerHTML =count;
if( count > preScore)
{
score1.innerHTML = count;
preScore = count;
}
localStorage.setItem("bestScore",preScore);
}catch(ex){
}
}
//设置一个定时器
var seconds = 59;
var speed = 1000;
function countDown(seconds,speed){
var txt = "剩余时间：" + ((seconds < 10) ? "0" + seconds : seconds) +"秒";
div.innerHTML = txt;
var timeId = setTimeout("countDown(seconds--,speed)",speed);
if(seconds == 0){
//localStorage.setItem("scoreshow",count);
localStorage.setItem("bestScore",preScore);
clearTimeout(timeId);
if(cover.style.display == "none"){
cover.style.display = "block";
if(count === undefined)
text.innerHTML = "当前成绩为："+0+"分"+"<br/>"+"游戏结束！";
else if(count == localStorage.getItem("bestScore")){
text.innerHTML = "当前成绩为："+count+"分"+"<br/>"+"恭喜您打破纪录"+"<br/>"+"游戏结束！";
}
else
text.innerHTML = "当前成绩为："+count+"分"+"<br/>"+"游戏结束！";
}
}
}
countDown(seconds,speed);
</script>
</body>
</html>