首先写一个小页面；页面需要一个div 这个div就是盒子，然后在div里在包含一个子div 这个子div就包含一张小球的图片
代码：
<!doctype html>
<html>
<head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><title>小球碰撞游戏</title><head>
<body>
<div id="gamescroll" style="600px;height:400px;position:absolute;top:0px;left:0px;border:1px solid black">
<div id="qiu"><img src="qiu.gif"/></div>
</div>
<script type="text/javascript" language="javascript">
function $(id){ return document.getElementById(id);};
function TinyGame(x,y,direx,direy){
this.x =x ;//横坐标
this.y = y;//纵坐标
this.direx = direx; //x方向移动的值
this.direy = direy;//y方向移动的值
this.moveqiu = function(){
this.x += this.direx;
this.y += this.direy;
$("qiu").style.left = this.x +'px';
$("qiu").style.top = this.y+'px';
if(this.x+$('qiu').offsetWidth >= $("gamescroll").offsetWidth || this.x <= 0){
/*如果x方向移动的距离+小球的实际宽度(offsetWidth-在浏览器里的实际宽度，offsetHeight--在浏览器里的实际高度)>=盒子的实际宽度 或者 x方向移动的距离小于等于0
就表示到达了边界
*/
this.direx = -this.direx;//正变负 负变正 表示处于两个不同的边界的情况处理
}
if(this.y+$('qiu').offsetHeight >= $("gamescroll").offsetHeight || this.y <= 0){
this.direy= -this.direy;//正变负 负变正 表示处于两个不同的边界的情况处理
}
}
}
var TG1 = new TinyGame(0,0,1,1);
setInterval("TG1->moveqiu()",500);
</script>
</body>
</html>