JS的碰撞周期移动

最新推荐文章于 2024-09-22 11:17:00 发布

ltx06

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量1.3k

点赞数 1

分类专栏： web开发文章标签： javascript js 碰撞反弹运动

本文链接：https://blog.csdn.net/ltx06/article/details/46667561

版权

web开发专栏收录该内容

186 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	#main {width:525px;
		   height:300px;
		   border:3px double black;
}
	#t {font-size:30px;
		color:blue;
		width:120px;
		height:35px;
		position:absolute;
		left:1;
		top:1;
	}
</style>
</head>

<body>
<div id="main"  onMouseDown="MovePos();" onMouseUp="BeginMove();">
	<div id="t" >移动文本</div>
</div>
<script type="text/javascript">
	var tID;
	var iDeltaX = 1,iDeltaY = 1,iTmp;
	var obj = document.getElementById("t");
	var x = obj.style.left;
	var y = obj.style.top;
	var TOPX = 420,BOUNDX =1,TOPY =270,BOUNDY=1;
	
	function MovePos()
	{
		
		clearTimeout(tID);//每次运动前都要清除上一次的定时器，这个是关键！！
		x=parseInt(x+iDeltaX);
		y=parseInt(y+iDeltaY);
		//注意！x=x+1;和x=x+iDeltaX;都不行！
		
		//核心：反弹碰撞算法
		if(x>TOPX || x<BOUNDX || y>TOPY || y<BOUNDY)
		{
			iTmp = iDeltaX;
			iDeltaX=-iDeltaY;
			iDeltaY=iTmp;
			
		}
		//文本没移动10步后（每次移动步长1像素），文本颜色就变为红色，再移动10步后，文本颜色又变成蓝色，并持续这种切换方式
		if(x%10==0)
		{
			if(x%20==0){
				obj.style.color = "blue";	
			}else{
					obj.style.color = "red";
			}
		}
		
		obj.style.left = x+"px";
		obj.style.top = y+"px";
		//注意！obj.setAttribute("left",x);obj.setAttribute("top",y);是不行的！
		
		//设置定时器
		tID=setTimeout("MovePos()",10);
	}	
		
	
	function BeginMove(){
		clearTimeout(tID);	
	}
	//当鼠标点击在div(id="main")内按下时，运动开始，并且在鼠标弹起时运动结束，所以，要在div(id="main")内按下鼠标单击，然后在div(id="main")外松开，鼠标弹起
	
	//其实这个不怎么完美，因为div(id="main")的位置还没调好，不过，反弹效果成功了
</script>
</body>
</html>