javascript碰撞检测

最新推荐文章于 2025-04-27 14:07:40 发布

原创最新推荐文章于 2025-04-27 14:07:40 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#碰撞检测

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种通过拖拽HTML元素并实时检测其与其他元素碰撞的方法。利用JavaScript实现元素位置更新，并根据元素间的相对位置判断是否发生碰撞，进而改变元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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; z-index:2;}
#div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:220px; z-index:1;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	
	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;
			
			oDiv.style.left=oEvent.clientX-disX+'px';
			oDiv.style.top=oEvent.clientY-disY+'px';
			
			var l1=oDiv.offsetLeft;//红块左边线
			var r1=oDiv.offsetLeft+oDiv.offsetWidth;//红块右边线
			var t1=oDiv.offsetTop;//红块上边线
			var b1=oDiv.offsetTop+oDiv.offsetHeight;//红块下边线
			
			var l2=oDiv2.offsetLeft;//黄块左边线
			var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;//黄块右边线
			var t2=oDiv2.offsetTop;//黄块上边线
			var b2=oDiv2.offsetTop+oDiv2.offsetHeight;//黄块下边线
			
			if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
			{
				oDiv2.style.background='yellow';
			}
			else
			{
				oDiv2.style.background='green';
			}
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
	};
};
</script>
</head>

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