元素碰撞检测原理及实现

最新推荐文章于 2022-06-01 02:13:51 发布

原创最新推荐文章于 2022-06-01 02:13:51 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了元素碰撞检测的原理，通过将空间划分为九宫格，并比较元素的offsetLeft和offsetRight来判断碰撞。当拖拽元素与固定元素接触时，可触发特定效果。同时介绍了如何用JS进行元素运动的封装和鼠标拖拽的实现。

元素碰撞检测原理及实现

我们知道当鼠标在元素上移入移出，可以使用hover属性来改变元素，如果是元素与元素碰撞呢？应该怎么操作呢？这个时候依然要使用我们之前介绍过的元素拖拽的效果。原理：先上图

images

绿色元素是固定元素(div2)，红色元素(div1)是拖拽的元素。将红元素拖拽碰到绿色元素时，绿色元素背景颜色发生改变。

1、按照上图将整个空间划分为九宫格形式。div2在空间5的位置。div1在其他位置就不会发生碰撞。

2、其实也就是比较div1的offsetLeft与div2的offsetLeft的大小。

3、div1和div2的左侧都是offsetLeft，他们的右侧都是用各自的offsetLeft加上各自的宽

4、div2的offsetLeft是固定的。div1的offsetLeft根据之前拖拽原理的可以求出。

5、使用if语句判断，div1和div2的offsetLeft即可。将R1和L2比较，将R2和L1比较

6、高度的比较和宽度类似

   <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>碰撞检测</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute; z-index: 2;}
#div2 { position: absolute; left: 500px; top: 200px;background:green;width: 100px;height: 100px}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				var L = ev.clientX - disX;
				var T = ev.clientY - disY;
				
				var L1 = L;
				var R1 = L + obj.offsetWidth;
				var T1 = T;
				var B1 = T + obj.offsetHeight;
				
				var L2 = oDiv2.offsetLeft;
				var R2 = L2 + oDiv2.offsetWidth;
				var T2 = oDiv2.offsetTop;
				var B2 = T2 + oDiv2.offsetHeight;
				
				if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
					oDiv2.style.background = 'green';
				} else {
					oDiv2.style.background = 'blue';
				}
				
				obj.style.left = L + 'px';
				obj.style.top = T + 'px';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

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

  