小球在你的客户端浏览器不停地运动,碰到边缘后会反弹,基于此可以做出一些很小的网页游戏~
源码:
<html>
<head>
<title>撞球游戏</title>
<script language="javasript" type="text/javascript">
function $(id){
return document.getElementById(id);
}
//定两个方向
var directX=1;//横向,初始化为1,表示增加
var directY=1;//纵向
var ballX=0;//小球坐标
var ballY=0;
var speed=1;//小球速度
function move(){
ballX+=speed*directX;
ballY+=speed*directY;
//修改
var ball = $("ballDiv");
ball.style.left=ballX+"px";
ball.style.top=ballY+"px";
//判断什么时候改变方向
//offsetWidth可以返回当前这个对象的实际宽度
if(ball.offsetWidth+ballX>=document.body.clientWidth||ballX<=0){
directX= (-1) * directX;
}
if(ball.offsetHeight+ballY>=document.body.clientHeight||ballY<=0){
directY = (-1) * directY;
}
}
function speedUp(){
speed++;
}
setInterval("move()",5);
setInterval("speedUp()",10000);//每隔10秒加速
</script>
</head>
<body style="background-image:url('background.jpg');">
<div id="ballDiv" style="position:absolute;">
<img src="ball.png"/>
</div>
</body>
</html>