109 lines
1.8 KiB
HTML
109 lines
1.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3c.org/1999/xhtml">
|
|
<head>
|
|
<title>Eyekiller</title>
|
|
<style type='text/css'>
|
|
* {
|
|
padding:0;
|
|
margin:0
|
|
}
|
|
|
|
body {
|
|
background:#0094ff url(eyekiller/bg.png);
|
|
}
|
|
|
|
#game {
|
|
position:absolute;
|
|
left:50%;
|
|
top:50%;
|
|
margin-left:-320px;
|
|
margin-top:-200px;
|
|
width:640px;
|
|
height:400px;
|
|
border:2px solid #000;
|
|
background-image:url(eyekiller/gbg.png);
|
|
background-repeat:no-repeat;
|
|
background-position:0 0;
|
|
}
|
|
|
|
#game.g1 {background-position:0 0}
|
|
#game.g2 {background-position:0 -400px}
|
|
#game.g3 {background-position:0 -800px}
|
|
#game.g4 {background-position:0 -1200px}
|
|
#game.g5 {background-position:0 -1600px}
|
|
|
|
#car {
|
|
position:absolute;
|
|
bottom:20px;
|
|
right:20px;
|
|
width:140px;
|
|
height:89px;
|
|
background:url(eyekiller/car.png) no-repeat;
|
|
display:none;
|
|
}
|
|
|
|
#car.show {
|
|
display:block;
|
|
}
|
|
</style>
|
|
<script type='text/javascript'>
|
|
s=20
|
|
g=1
|
|
b=1
|
|
cr=false
|
|
|
|
function ani() {
|
|
s=(s-20)*(-1)+25
|
|
car.style.bottom=s+"px"
|
|
|
|
at=setTimeout("ani()",150)
|
|
}
|
|
|
|
function bgani() {
|
|
if (g<5) g++
|
|
else g=1
|
|
game.className="g"+g
|
|
|
|
bt=setTimeout("bgani()",50)
|
|
}
|
|
|
|
function bgbgani() {
|
|
d.style.backgroundPosition=b+"px -"+b+"px"
|
|
b++
|
|
bbt=setTimeout("bgbgani()",10)
|
|
}
|
|
|
|
function clck() {
|
|
if (!cr) {
|
|
cr=true
|
|
car.className="show"
|
|
ani()
|
|
bgbgani()
|
|
}
|
|
else {
|
|
cr=false
|
|
car.className=""
|
|
clearTimeout(at)
|
|
clearTimeout(bbt)
|
|
}
|
|
}
|
|
|
|
function load() {
|
|
document.title+=" :: Click on screen to see a moving background and a car"
|
|
game=document.getElementById("game")
|
|
car=document.getElementById("car")
|
|
d=document.body
|
|
|
|
bgani()
|
|
}
|
|
|
|
window.onload=load
|
|
document.onclick=clck
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id='game'>
|
|
<div id='car'></div>
|
|
</div>
|
|
</body>
|
|
</html> |