<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>打地鼠(速度递增)</title>
<style type="text/css">
html
{
margin:8px;
padding:0px;
height:100%;
}
body
{
margin:0px;
padding:0px;
height:100%;
<!--OVERFLOW: hidden;-->
}
.bg
{
position:absolute;
height : 480px;
width : 100%;
}
.fast
{
position:absolute;
margin:20px;
height : 300px;
width : 100%;
}
.m
{
position:absolute;
height:90px;
width:100px;
}
.btn
{
margin-top:482px;
}
</style>
<script type="text/javascript">
//定义全局变量
//分数
var score = 0;
//定义两个变量 用于下方的setInterval 老鼠 出现 /消失/ timeout
var Interval;
var IntervalDisappear;
var t;
var per;
var timeAll = 2000;
var timeHalf = 0.5 *timeAll;
var CountsShow = 0;
var CountsHit = 0;
var level = 0;
var levelTime;
var halfLevelTime = timeHalf;
var lv = 0;
//top
function funTop(x)
{
switch (x) {
case 1:
return x = 110 + 'px'
break;
case 2:
return x = 110 + 'px'
break;
case 3:
return x = 115 + 'px'
break;
case 4:
return x = 203 + 'px'
break;
case 5:
return x = 203 + 'px'
break;
case 6:
return x = 200 + 'px'
break;
case 7:
return x = 300 + 'px'
break;
case 8:
return x = 305 + 'px'
break;
case 9:
return x = 305 + 'px'
break;
}
}
//left
function funLeft(x)
{
switch (x) {
case 1:
return x = 155
break;
case 2:
return x = 342
break;
case 3:
return x = 546
break;
case 4:
return x = 125
break;
case 5:
return x = 349
break;
case 6:
return x = 549
break;
case 7:
return x = 117
break;
case 8:
return x = 346
break;
case 9:
return x = 569
break;
}
}
//时间到了 自动停止
function funTimeout()
{
funStop();
}
//每隔一段时间 老鼠消失
function funDisappear()
{
t = setTimeout(" var m = document.getElementById('m'); m.style.display = 'none'; " ,halfLevelTime);
}
function funPercent()//图片缩放比例
{
var cW = document.body.clientWidth;
per = cW / 800;
}
//老鼠随机位置
function funRandom()
{
if((CountsShow - CountsHit) < 10)//有十个没打到就GameOver
{
if(lv==level)//等级不变
{
funPercent();
var m = document.getElementById('m');
m.style.display = "none";
//随即 整数1-9 代表9个位置
var random = Math.ceil(Math.random()*9);
m.style.top= funTop(random);
m.style.left= (funLeft(random)) * per + 'px';
m.style.width = 100 * per + 'px';
m.style.display = "";
CountsShow +=1;
level = Math.floor(CountsShow / 10)
}
else
{
lv = level;
funChangeLevel();
}
}
else
{
funStop();
}
}
function funChangeLevel()
{
clearInterval(Interval);
clearInterval(IntervalDisappear);
clearTimeout(t)
levelTime = timeAll * Math.pow(0.75, level);
halfLevelTime = levelTime * 0.5;
var fastter = document.getElementById('fastter');
fastter.style.display = "";
setTimeout("fastter.style.display = 'none'; " ,halfLevelTime);
Interval = setInterval(funRandom,levelTime);
IntervalDisappear = setInterval(funDisappear,levelTime);
}
//开始按钮事件
function funStart()
{
score = 0;
document.getElementById('score').innerHTML = "得分：" + score + "； 等级：" + (level+1);//分数清空
Interval = setInterval(funRandom,timeAll);
IntervalDisappear = setInterval(funDisappear,timeAll);//实现思路 老鼠的出现和消失周期都是 timeAll ，但老鼠消失 是在出现halfTimes后发生；总体效果就是 出现halftimes 消失halftimes
document.getElementById('btnStop').disabled="";
document.getElementById('btnStart').disabled="disabled";//按钮变化
// t = setTimeout(funTimeout,61000);//时间60000 再加上间隔时间1000 ==61000
}
function funStop()
{
clearInterval(Interval);
clearInterval(IntervalDisappear);
// clearTimeout(t);//停止计时器
document.getElementById('btnStop').disabled="disabled";
document.getElementById('btnStart').disabled=""; //按钮变化
alert("游戏结束！您的得分为：" + score);//弹出成绩
CountsShow = 0;
CountsHit = 0;
level = 0;
halfLevelTime = timeHalf;
lv = 0;
}
function getScore()//计分
{
var m = document.getElementById('m');
m.style.display = "none";//点击完 地鼠消失 避免重复计分
var yourScore = document.getElementById('score');
score += 1;
yourScore.innerHTML = "得分：" + score + "； 等级：" + (level+1);
CountsHit += 1;
}
function funClickDown()//锤子垂下 cur变
{
var m = document.getElementById('m');
var bg = document.getElementById('bg');
m.style.cursor = 'url(cur/cz1-64.cur),auto'
bg.style.cursor = 'url(cur/cz1-64.cur),auto'
}
function funClickUp()//锤子提起 cur变
{
var m = document.getElementById('m');
var bg = document.getElementById('bg');
m.style.cursor = 'url(cur/cz-64.cur),auto'
bg.style.cursor = 'url(cur/cz-64.cur),auto'
}
</script>
</head>
<body>
<div style="cursor:url(cur/cz-64.cur),auto">
<img id="bg" class="bg" src="image/bg.jpg" alt="" style="cursor:url(cur/cz-64.cur),auto" onmousedown="funClickDown()"; onmouseup="funClickUp()" />
<img id="m" class="m" src="image/m.gif" alt="" style="display:none; left: 345px; top: 210px;"onclick="getScore()" onmousedown="funClickDown()"; onmouseup="funClickUp()" />
<img id="fastter" class="fast" src="image/0.png" alt="" style="display:
