metanohi-misc-subsites/old-projects/x/circlebounce.htm

110 lines
1.9 KiB
HTML
Raw Normal View History

2011-08-02 19:57:57 +02:00
<!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>CircleBounce</title>
<style type='text/css'>
* {
margin:0;
padding:0;
text-decoration:none;
font-weight:normal;
color:#000;
font:16px arial;
}
body {
font:16px arial;
background-color:#fff;
overflow:hidden;
}
#circle {
background-image:url('img/circle.png');
background-repeat:no-repeat;
width:50px;
height:50px;
position:absolute;
}
</style>
<script type='text/javascript'>
function getwh() {
if (self.innerHeight) {
w=self.innerWidth
h=self.innerHeight
}
else if (document.documentElement && document.documentElement.clientHeight) {
w=document.documentElement.clientWidth
h=document.documentElement.clientHeight
}
else if (document.body) {
w=document.body.clientWidth
h=document.body.clientHeight
}
w=w-50
h=h-50
}
img1=new Image()
img1.src="img/circle_l.png"
function endsi() {
if (cg==0) {
cg=cg+1
cgt=setTimeout("endsi()",100)
}
else
c.style.backgroundImage="url('img/circle.png')"
}
function movecircle() {
c.style.left=x+"px"
c.style.top=y+"px"
if (y<1)
yt=2
else if (y>h-1)
yt=-2
if (x<1)
xt=2
else if (x>w-1)
xt=-2
if (y<1 || y>h-1 || x<1 || x>w-1) {
c.style.backgroundImage="url('img/circle_l.png')"
cg=0
endsi()
}
//else
//c.style.backgroundImage="url('img/circle.png')"
x=x+xt
y=y+yt
t=setTimeout("movecircle()",1)
}
function cstart() {
c=document.getElementById("circle")
getwh()
x=Math.floor(Math.random()*w)
y=Math.floor(Math.random()*h)
yt=Math.floor(Math.random()*2)
if (yt==0) yt=-2
else yt=2
xt=Math.floor(Math.random()*2)
if (xt==0) xt=-2
else xt=2
movecircle()
}
window.onload=cstart
window.onresize=getwh
</script>
</head>
<body>
<div id='circle'></div>
</body>
</html>