韩顺平 javascript教学视频_学习笔记30_小球撞球游戏

最新推荐文章于 2016-11-16 13:59:43 发布

D计划

最新推荐文章于 2016-11-16 13:59:43 发布

阅读量1.2k

点赞数

分类专栏： Javascript 学习笔记文章标签：学习视频 javascript 学习笔记韩顺平

本文链接：https://blog.csdn.net/fuyizhonhong/article/details/50723988

版权

Javascript 学习笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

dom编程实例----小球撞球游戏

要求如下：

资源：

背景：

小太阳：

程序代码：

<html>
<head>
<title>小太阳</title>
<script language="javascript">  
  
		//定两个全局变量
		directX=1; //x轴的方向
		directY=1; //y轴的方向
		
		sunX=0; //太阳的坐标
		sunY=0; //
		speed=2;//速度
		function sunMove(){
			
			sunX+=directX*speed;
			sunY+=directY*speed;
			
			//修改div的left top
			sundiv.style.top=sunY+"px";
			sundiv.style.left=sunX+"px";
			
			//判断什么时候转变方向
			//什么时候x方向转向
			//offsetWidth 可以返回当前这个对象事件的宽度
			if(sunX+sundiv.offsetWidth>=document.body.clientWidth||sunX<=0){
				
				directX=-directX;
			}
			//判断y的方向
			if(sunY+sundiv.offsetHeight>=document.body.clientHeight||sunY<=0){
				
				directY=-directY;
			}
		}
 
		setInterval("sunMove()",10);
</script>
</head>
<body style="background-image:url('10.png')">
<div id="sundiv" style="position:absolute">
<img src="太阳.png"/>
</div></body>
</html>