source code:

<html>
	<head>
	</head>
	<body style='height:1000px;'>
		<div id='redDiv' style='width:80px; height:80px; background:red; position:absolute; top:400px; left:800px;'></div>
		<div id='greenDiv' style='width:80px; height:80px; background:green; position:absolute; top:550; left:850px;'></div>
		<div id='resultArea' style='height:100px; overflow:auto;'></div>
		<script>
			// 红色方块
			var a = document.getElementById('redDiv');
			// 绿色方块
			var b = document.getElementById('greenDiv');
			// 结果区域
			var resultAreaCell = document.getElementById('resultArea');
			//通过鼠标事件让方块跟着鼠标移动
			window.onmousemove = mouseMoveFunction;
			function mouseMoveFunction(event) {
				var e = event || window.event;
				if (b != undefined) {
					b.style.top = e.clientY - 20 + 'px';
					b.style.left = e.clientX - 20 + 'px';
					if(pgCheck(b,a)) {
						resultAreaCell.innerHTML = '<h3 style="color:red;">检测碰撞</h3>';
					} else {
						resultAreaCell.innerHTML = '';
					}
				}
			}
			// 将html元素的碰撞检测封装到一个函数中
			function pgCheck(cellA, cellB) {
				// 转换两个元素左上角的坐标（将带px的字符串转换为整数值）
				cellA.currentLeft = parseInt(cellA.style.left.substring(0, cellA.style.left.length - 2));
				cellA.currentTop = parseInt(cellA.style.top.substring(0, cellA.style.top.length - 2));
				cellB.currentLeft = parseInt(cellB.style.left.substring(0, cellB.style.left.length - 2));
				cellB.currentTop = parseInt(cellB.style.top.substring(0, cellB.style.top.length - 2));
				if(cellA.currentLeft >= cellB.currentLeft && cellA.currentTop >= cellB.currentTop) {
					if (cellA.currentLeft <= (cellB.currentLeft + cellB.clientWidth) && cellA.currentTop <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if((cellA.currentLeft + cellA.clientWidth)>= cellB.currentLeft   && cellA.currentTop >= cellB.currentTop) {
					if ((cellA.currentLeft + cellA.clientWidth) <= (cellB.currentLeft + cellB.clientWidth) && cellA.currentTop <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if(cellA.currentLeft >= cellB.currentLeft && (cellA.currentTop + cellA.clientHeight) >= cellB.currentTop) {
					if (cellA.currentLeft <= (cellB.currentLeft + cellB.clientWidth) && (cellA.currentTop + cellA.clientHeight) <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if((cellA.currentLeft + cellA.clientWidth) >= cellB.currentLeft && (cellA.currentTop + cellA.clientHeight) >= cellB.currentTop) {
					if ((cellA.currentLeft + cellA.clientWidth) <= (cellB.currentLeft + cellB.clientWidth) && (cellA.currentTop + cellA.clientHeight) <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				// 将cellA 与 cellB进行交换
				var t = cellA;
				cellA = cellB;
				cellB = t;
				if(cellA.currentLeft >= cellB.currentLeft && cellA.currentTop >= cellB.currentTop) {
					if (cellA.currentLeft <= (cellB.currentLeft + cellB.clientWidth) && cellA.currentTop <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if((cellA.currentLeft + cellA.clientWidth)>= cellB.currentLeft   && cellA.currentTop >= cellB.currentTop) {
					if ((cellA.currentLeft + cellA.clientWidth) <= (cellB.currentLeft + cellB.clientWidth) && cellA.currentTop <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if(cellA.currentLeft >= cellB.currentLeft && (cellA.currentTop + cellA.clientHeight) >= cellB.currentTop) {
					if (cellA.currentLeft <= (cellB.currentLeft + cellB.clientWidth) && (cellA.currentTop + cellA.clientHeight) <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if((cellA.currentLeft + cellA.clientWidth) >= cellB.currentLeft && (cellA.currentTop + cellA.clientHeight) >= cellB.currentTop) {
					if ((cellA.currentLeft + cellA.clientWidth) <= (cellB.currentLeft + cellB.clientWidth) && (cellA.currentTop + cellA.clientHeight) <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				return false;
			}
				
		</script>
	</body>
</html>

 

# javascript # html
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

ADS1292R 使用 过程 心电图 高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

avatar 开放原子开发者工作坊
cover

实现一个家庭安防与环境监测系统（一）

avatar 开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S

avatar 开放原子开发者工作坊