拖拽+碰撞+重力运动

最新推荐文章于 2024-04-08 13:32:44 发布

luohui2017

最新推荐文章于 2024-04-08 13:32:44 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：碰撞运动拖拽

本文链接：https://blog.youkuaiyun.com/luohui2017/article/details/79337188

javascript 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	var lastX=0;
	var lastY=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
			
			iSpeedX=l-lastX;
			iSpeedY=t-lastY;
			
			lastX=l;
			lastY=t;
			
			document.title='x:'+iSpeedX+', y:'+iSpeedY;
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
			
			startMove();
		};
		
		clearInterval(timer);
	};
};

var timer=null;

var iSpeedX=0;
var iSpeedY=0;

function startMove()
{
	clearInterval(timer);
	
	timer=setInterval(function (){
		var oDiv=document.getElementById('div1');
		
		iSpeedY+=3;
		
		var l=oDiv.offsetLeft+iSpeedX;
		var t=oDiv.offsetTop+iSpeedY;
		
		if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
		{
			iSpeedY*=-0.8;
			iSpeedX*=0.8;
			t=document.documentElement.clientHeight-oDiv.offsetHeight;
		}
		else if(t<=0)
		{
			iSpeedY*=-1;
			iSpeedX*=0.8;
			t=0;
		}
		
		if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
		{
			iSpeedX*=-0.8;
			l=document.documentElement.clientWidth-oDiv.offsetWidth;
		}
		else if(l<=0)
		{
			iSpeedX*=-0.8;
			l=0;
		}
		
		if(Math.abs(iSpeedX)<1)
		{
			iSpeedX=0;
		}
		
		if(Math.abs(iSpeedY)<1)
		{
			iSpeedY=0;
		}
		
		if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
		{
			clearInterval(timer);
		}
		else
		{
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		}
		
		document.title=iSpeedX;
	}, 30);
}
</script>
</head>

<body>

<div id="div1">
</div>
</body>
</html>

代码结合了碰撞运动和拖拽，外加本身重力，模拟小球掉在地面的运动情况。