1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>游戏-小太阳</title>
6 <style>
7 html,body{height: 100%;width: 100%;}
8 #sunDiv{position: absolute;}
9 #sunDiv img{width: 50px;height: 50px;}
10 </style>
11 </head>
12 <body>
13 <div id="sunDiv">
14 <img src="0.jpg">
15 </div>
16 <script type="text/javascript">
17 var sunDiv=document.getElementById("sunDiv");
18 //定两个方法 全局变量
19 var directX=1;//X轴横向的方法 初始化为1
20 var directY=1;//Y轴纵向的方法
21 var sunX=0;//太阳的坐标
22 var sunY=0;
23 function sunMove(){
24
25 sunX+=directX;
26 sunY+=directY;
27 //修改div的left 和top就OK了
28 sunDiv.style.left=sunX+"px";
29 sunDiv.style.top=sunY+"px";
30 //判断什么时候太阳转变方向
31 //X方向方法offsetWidth返回 当前对象事件的宽度
32 if(sunX+sunDiv.offsetWidth>=document.body.clientWidth||sunX<=0)
33 {
34 directX=-directX;
35 }
36 // //判断Y方向
37 if(sunY+sunDiv.offsetHeight>=document.body.clientHeight||sunY<=0)
38 {
39 directY=-directY;
40 }
41 }
42 setInterval("sunMove()",1);
43 </script>
44 </body>
45 </html>
