打地鼠

<!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].οnclick=function(){
time1=setInterval(function(){
if(i==10){
pass();
i=0;
}else{
createMouse();
}
},1800)
}
btn[1].οnclick=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>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值