打地鼠
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hole{
width: 100px;
height: 100px;
float: left;
position: absolute;
}
</style>
</head>
<body>
<div style="width: 800px;height: 400px;margin: 0 auto; background: url(bg.jpg);">
<div class="hole" style="top: 25px; left: 114px;"></div>
<div class="hole" style="top: 25px; left: 334px;"></div>
<div class="hole" style="top: 25px; left:550px;"></div>
<div class="hole" style="top: 130px; left: 114px;"></div>
<div class="hole" style="top: 130px; left: 333px;"></div>
<div class="hole" style="top: 130px; left: 550px;"></div>
<div class="hole" style="top: 232px; left: 114px;"></div>
<div class="hole" style="top: 232px; left: 333px;"></div>
<div class="hole" style="top: 232px; left: 550px;"></div>
</div>
<p id="score">分数：0</p>
<p id="lv">第一关</p>
<input type="button" value="start" />
<input type="button" value="stop" />
<script>
var time1,num,i=0;
var count=0;
var lv = 1;
var lvs=1500;
var holes=document.getElementsByClassName("hole");
var scoreshow=document.getElementById("score");
var olv=document.getElementById("lv");
var btn=document.getElementsByTagName("input");
btn[0].onclick=function(){
time1=setInterval(function(){
if(i==10){
pass();
i=0;
}else{
createMouse();
}
},1800)
}
btn[1].onclick=function(){
clearInterval(time1);
}
function createMouse(){
var newMouse=document.createElement("img");
num=Math.floor(Math.random()*8);
newMouse.className="mouse";
newMouse.onclick=hit;
newMouse.src="1.png";
holes[num].appendChild(newMouse);
setTimeout(function(){
holes[num].removeChild(holes[num].lastElementChild);
},lvs)
i++;
}
function hit(){
count+=100;
scoreshow.innerHTML="分数："+count;
holes[num].removeChild(holes[num].lastElementChild);
var sucess=document.createElement("h2");
sucess.innerHTML="+100";
holes[num].appendChild(sucess);
}
function pass(){
if(lvs<200){
alert("恭喜通关！");
}
if (count>=80*i) {
alert("恭喜通关，进入下一关");
count=0;
lvs=lvs-(lv*150);
lv++;
olv.innerHTML="第"+lv+"关";
scoreshow.innerHTML="分数"+count;
}else{
alert("好可惜，再来一次吧");
count=0;
lv =1;
lvs = 1500;
olv.innerHTML="第一关";
scoreshow.innerHTML="分数："+count;
}
}
</script>
</body>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hole{
width: 100px;
height: 100px;
float: left;
position: absolute;
}
</style>
</head>
<body>
<div style="width: 800px;height: 400px;margin: 0 auto; background: url(bg.jpg);">
<div class="hole" style="top: 25px; left: 114px;"></div>
<div class="hole" style="top: 25px; left: 334px;"></div>
<div class="hole" style="top: 25px; left:550px;"></div>
<div class="hole" style="top: 130px; left: 114px;"></div>
<div class="hole" style="top: 130px; left: 333px;"></div>
<div class="hole" style="top: 130px; left: 550px;"></div>
<div class="hole" style="top: 232px; left: 114px;"></div>
<div class="hole" style="top: 232px; left: 333px;"></div>
<div class="hole" style="top: 232px; left: 550px;"></div>
</div>
<p id="score">分数：0</p>
<p id="lv">第一关</p>
<input type="button" value="start" />
<input type="button" value="stop" />
<script>
var time1,num,i=0;
var count=0;
var lv = 1;
var lvs=1500;
var holes=document.getElementsByClassName("hole");
var scoreshow=document.getElementById("score");
var olv=document.getElementById("lv");
var btn=document.getElementsByTagName("input");
btn[0].onclick=function(){
time1=setInterval(function(){
if(i==10){
pass();
i=0;
}else{
createMouse();
}
},1800)
}
btn[1].onclick=function(){
clearInterval(time1);
}
function createMouse(){
var newMouse=document.createElement("img");
num=Math.floor(Math.random()*8);
newMouse.className="mouse";
newMouse.onclick=hit;
newMouse.src="1.png";
holes[num].appendChild(newMouse);
setTimeout(function(){
holes[num].removeChild(holes[num].lastElementChild);
},lvs)
i++;
}
function hit(){
count+=100;
scoreshow.innerHTML="分数："+count;
holes[num].removeChild(holes[num].lastElementChild);
var sucess=document.createElement("h2");
sucess.innerHTML="+100";
holes[num].appendChild(sucess);
}
function pass(){
if(lvs<200){
alert("恭喜通关！");
}
if (count>=80*i) {
alert("恭喜通关，进入下一关");
count=0;
lvs=lvs-(lv*150);
lv++;
olv.innerHTML="第"+lv+"关";
scoreshow.innerHTML="分数"+count;
}else{
alert("好可惜，再来一次吧");
count=0;
lv =1;
lvs = 1500;
olv.innerHTML="第一关";
scoreshow.innerHTML="分数："+count;
}
}
</script>
</body>
</html>