JavaScript-demo-圆形碰撞检测

最新推荐文章于 2022-12-12 13:47:50 发布

coffee_cold

最新推荐文章于 2022-12-12 13:47:50 发布

阅读量477

点赞数

分类专栏： Web 前端文章标签： javascript html 碰撞检测圆形碰撞检测

本文链接：https://blog.csdn.net/v7911/article/details/114686865

版权

本文通过JavaScript演示如何进行圆形之间的碰撞检测。详细介绍了检测逻辑和源代码，适用于游戏开发或互动应用中的碰撞响应。

摘要由CSDN通过智能技术生成

source code:

<html>
	<head>
		<style>
			#circleA {
				background:red;
				width:100px;
				height:100px;
				border-radius:50px;
				position:absolute;
			}
			#circleB {
				background:green;
				width:100px;
				height:100px;
				border-radius:50px;
				position:absolute;
			}
		</style>
	</head>
	<body>
		<div id='textArea' style='font-size:30px;'>
			两个圆的圆心之间的距离 如果 小于两个圆的半径和 则 两个圆一定碰撞了！
		</div>
		<div id='circleA' style='left:500px; top:400px;'></div>
		<div id='circleB' style='left:300px; top:290px;'></div>
		<script>
			var circleACell = document.getElementById('circleA');
			var circleBCell = document.getElementById('circleB');
			var textAreaCell = document.getElementById('textArea');
			window.onmousemove = function(){
				var e = event