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>