JavaScript项目-碰撞检测-组团学

一、边界碰撞

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>碰撞检测(边界)</title>
	<style type="text/css">
		#box{width: 500px;height: 300px;border: 1px solid hotpink;position: relative;}
		#boll{width: 50px;height: 50px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}
	</style>
</head>
<body>
	<div id="box">
		<div id="boll"></div>
	</div>

	<script type="text/javascript">
		var jsBoxDiv = document.getElementById("box");
		var jsBollDiv = document.getElementById("boll");

		var speedX = 5;
		var speedY = 2;

		var timer = setInterval(function(){
			if (jsBollDiv.offsetLeft + jsBollDiv.offsetWidth >= jsBoxDiv.offsetWidth || jsBollDiv.offsetLeft < 0 ) {
				speedX *= -1;
			}

			if (jsBollDiv.offsetTop + jsBollDiv.offsetHeight >= jsBoxDiv.offsetHeight || jsBollDiv.offsetTop < 0) {
				speedY *= -1;
			}

			jsBollDiv.style.left = jsBollDiv.offsetLeft + speedX + "px";
			jsBollDiv.style.top = jsBollDiv.offsetTop + speedY + "px";
		}, 10);

	</script>
</body>
</html>

二、矩形碰撞

矩形碰撞原理.png

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>碰撞检测(矩形)</title>
	<style type="text/css">
		*{margin: 0;padding: 0}
		#box{width: 500px;height: 300px;border: 1px solid hotpink;position: relative;}
		#rectangle1{width: 50px;height: 50px;background-color: red;left: 100px;top: 100px;position: absolute;}
		#rectangle2{width: 50px;height: 50px;background-color: yellow;left: 200px;top: 200px;position: absolute;}
	</style>
</head>
<body>
	<div id="box">
		<div id="rectangle1"></div>
		<div id="rectangle2"></div>
	</div>
	<script type="text/javascript">
		
		//添加拖动
		var rectangles = document.querySelectorAll('#box>div');
		for (var i = 0; i < rectangles.length; i++) {
			rectangles[i].onmousedown = function(e){
				var evt = e || window.event;

				var disx = evt.clientX - this.offsetLeft;
				var disy = evt.clientY - this.offsetTop;
				var self = this;

				document.onmousemove = function(e){
					var ev = e || window.event;

					var x = ev.clientX - disx;
					var y = ev.clientY - disy;

					self.style.left = x + "px";
					self.style.top = y + "px";

					//检测是否发生碰撞
					pzjcFunc(rectangles[0], rectangles[1]);
				};
			};
		}

		document.onmouseup = function(){
			document.onmousemove = document.onmousedown = null;
		};

		//检测是否发生碰撞的方法
		function pzjcFunc(obj1, obj2){
			var obj1Left = obj1.offsetLeft;
			var obj1Width = obj1Left + obj1.offsetWidth;
			var obj1Top = obj1.offsetTop;
			var obj1Height = obj1Top + obj1.offsetHeight;

			var obj2Left = obj2.offsetLeft;
			var obj2Width = obj2Left + obj2.offsetWidth;
			var obj2Top = obj2.offsetTop;
			var obj2Height = obj2Top + obj2.offsetHeight;

			if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
				obj1.style.backgroundColor = "black";
			}
		}
	</script>
</body>
</html>

三、圆形碰撞

截屏2020022610.36.53.png

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>碰撞检测V3(圆形)</title>
	<style type="text/css">
		*{margin: 0;padding: 0}
		#box{width: 500px;height: 300px;border: 1px solid hotpink;position: relative;}
		#rectangle1{width: 50px;height: 50px;background-color: red;left: 100px;top: 100px;position: absolute;border-radius: 50%;}
		#rectangle2{width: 50px;height: 50px;background-color: yellow;left: 200px;top: 200px;position: absolute;border-radius: 50%;}
	</style>
</head>
<body>
	<div id="box">
		<div id="rectangle1"></div>
		<div id="rectangle2"></div>
	</div>
	<script type="text/javascript">
		
		//添加拖动
		var rectangles = document.querySelectorAll('#box>div');

		for (var i = 0; i < rectangles.length; i++) {
			rectangles[i].onmousedown = function(e){
				var evt = e || window.event;

				var disx = evt.clientX - this.offsetLeft;
				var disy = evt.clientY - this.offsetTop;
				var self = this;

				document.onmousemove = function(e){
					var ev = e || window.event;

					var x = ev.clientX - disx;
					var y = ev.clientY - disy;

					self.style.left = x + "px";
					self.style.top = y + "px";

					//检测是否发生碰撞
					pzjcFunc(rectangles[0], rectangles[1]);
				};
			};
		}

		document.onmouseup = function(){
			document.onmousemove = document.onmousedown = null;
		};

		//检测是否发生碰撞的方法
		function pzjcFunc(obj1, obj2) {
			//第一个圆形的圆心点坐标
			var obj1x = obj1.offsetLeft + obj1.offsetWidth / 2;
			var obj1y = obj1.offsetTop + obj1.offsetHeight / 2;

			//第二个圆形的圆心点坐标
			var obj2x = obj2.offsetLeft + obj2.offsetWidth / 2;
			var obj2y = obj2.offsetTop + obj2.offsetHeight / 2;

			//求两个圆的圆心距
			var le = Math.sqrt((obj1x - obj2x) * (obj1x - obj2x) + (obj1y - obj2y) * (obj1y - obj2y));
			//var le = Math.sqrt((obj2x - obj1x) * (obj2x - obj1x) + (obj2y - obj1y) * (obj2y - obj1y));
			if (le <= (obj1.offsetWidth / 2 + obj2.offsetWidth / 2)) {
				obj1.style.backgroundColor = "black";
			}
		}
	</script>
</body>
</html>