110 lines
1.9 KiB
HTML
110 lines
1.9 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>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>
|