简单前端——圆与圆碰撞检测

最新推荐文章于 2021-07-19 20:47:14 发布

zhuxiongyin

最新推荐文章于 2021-07-19 20:47:14 发布

阅读量963

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/zhuxiongyin/article/details/71499843

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

只是没什么做搞个来玩玩，顺便练练手

鼠标按着红球，就可以移动红球，如果以黄球发生碰撞，红球就变为绿球，否则颜色不变。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		#a , #b {
			width: 100px;
			height: 100px;
			position: absolute;
			border-radius: 50%;
		}
		#a{
			left: 0;
			top: 0;
			background-color: red;
			z-index: 1;
		}
		#b {
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div id="a"></div>
	<div id="b"></div>
<script>
	var a = document.getElementById('a');  
	var b = document.getElementById('b');
	a.onmousedown = function (ev) { 
		aX = ev.clientX - a.offsetLeft;  
		aY = ev.clientY - a.offsetTop;
		document.onmousemove = function (ev) {
			var t1 = a.offsetTop;  
			var l1 = a.offsetLeft;

			var t2 = b.offsetTop;  
			var l2 = b.offsetLeft; 
			if (Math.sqrt(Math.pow(t1 - t2, 2) + Math.pow(l1 - l2, 2)) <= 100) {  
				// 如果两圆的圆心距小于或等于两圆半径和则认为发生碰撞  
				a.style.background = 'green';
			}else{
				a.style.background = 'red';
			}

			a.style.left = ev.clientX - aX +'px';  
			a.style.top = ev.clientY - aY +'px';  
		}
		document.onmouseup = function () {  
			document.onmousemove = null;  
			document.onmouseup = null;  

		}  
		return false;  
	}
</script>
</body>
</html>