<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hole{
width: 100px;
height: 100px;
float: left;
position: absolute;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div style="width: 800px;height: 400px; background-image: url(bg.jpg);">
<div class="hole" style="top: 35px;left: 114px;"></div>
<div class="hole" style="top: 35px;left: 330px;"></div>
<div class="hole" style="top: 35px;left: 550px;"></div>
<div class="hole" style="top: 150px;left: 114px;"></div>
<div class="hole" style="top: 150px;left: 330px;"></div>
<div class="hole" style="top: 150px;left: 550px;"></div>
<div class="hole" style="top: 260px;left: 114px;"></div>
<div class="hole" style="top: 260px;left: 330px;"></div>
<div class="hole" style="top: 260px;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.οnclick=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>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hole{
width: 100px;
height: 100px;
float: left;
position: absolute;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div style="width: 800px;height: 400px; background-image: url(bg.jpg);">
<div class="hole" style="top: 35px;left: 114px;"></div>
<div class="hole" style="top: 35px;left: 330px;"></div>
<div class="hole" style="top: 35px;left: 550px;"></div>
<div class="hole" style="top: 150px;left: 114px;"></div>
<div class="hole" style="top: 150px;left: 330px;"></div>
<div class="hole" style="top: 150px;left: 550px;"></div>
<div class="hole" style="top: 260px;left: 114px;"></div>
<div class="hole" style="top: 260px;left: 330px;"></div>
<div class="hole" style="top: 260px;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.οnclick=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>
</html>