原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM

重叠阴影面积算法

let width = (Math.min(tx2,mx2) - Math.max(tx1,mx1));

let height = (Math.min(ty2,my2) - Math.max(ty1,my1));

let stackArea = (width > 0 ? width : 0) * (height > 0 ? height : 0);

stackArea=0代表没有重叠；stackArea >0代表有交集

//判断两个矩形DIV是否重叠----------------------------------------
function isOver(targetDom, moveDom) {
if (targetDom === moveDom) return false;
let tx1 = parseInt(targetDom.style.left);
let ty1 = parseInt(targetDom.style.top);
let tx2 = tx1 + parseInt(targetDom.style.width);
let ty2 = ty1 + parseInt(targetDom.style.height);
let mx1 = parseInt(moveDom.style.left);
let my1 = parseInt(moveDom.style.top);
let mx2 = mx1 + parseInt(moveDom.style.width);
let my2 = my1 + parseInt(moveDom.style.height);
let width = Math.min(tx2, mx2) - Math.max(tx1, mx1);
let height = Math.min(ty2, my2) - Math.max(ty1, my1);
let stackArea = (width > 0 ? width : 0) * (height > 0 ? height : 0);
// ----------------------------------------
if (stackArea > 0) return true;
return false;
}

一对多碰撞检测

target是目标物体，move是移动物体

​//判断多个矩形DIV是否重叠，并获取最大的那个----------------------------------------
function isOverManyTarget(targetDom, moveDom) {
if (targetDom === moveDom) return false;
let tx1 = parseInt(targetDom.style.left);
let ty1 = parseInt(targetDom.style.top);
let tx2 = tx1 + parseInt(targetDom.style.width);
let ty2 = ty1 + parseInt(targetDom.style.height);
let mx1 = parseInt(moveDom.style.left);
let my1 = parseInt(moveDom.style.top);
let mx2 = mx1 + parseInt(moveDom.style.width);
let my2 = my1 + parseInt(moveDom.style.height);
let width = Math.min(tx2, mx2) - Math.max(tx1, mx1);
let height = Math.min(ty2, my2) - Math.max(ty1, my1);
let stackArea = (width > 0 ? width : 0) * (height > 0 ? height : 0);

// ----------------------------------------

//计算面积

let measure = parseInt(targetDom.style.width) * parseInt(targetDom.style.height);
let measureHalf = measure / 2;
if (stackArea > measureHalf && stackArea <= measure) return targetDom;

return null;
}

|
7天前
|

Vue.js计算属性：实现数据驱动的利器
Vue.js计算属性：实现数据驱动的利器
10 0
|
19小时前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
2 0
|
7天前
|
JavaScript 前端开发 流计算

14 0
|
9天前
|

9 0
|
9天前
|
JavaScript 前端开发 算法

【5月更文挑战第14天】在JavaScript中实现的基本AABB矩形碰撞检测用于2D游戏，涉及Rectangle类，包含x，y，width和height属性，以及一个检测碰撞的collidesWith方法。该方法通过比较矩形边界来判断是否相交，返回布尔结果。示例代码展示了如何检测两个Rectangle实例是否发生碰撞。更复杂的场景可能需使用高级算法或物理引擎库。
16 3
|
9天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM（文档对象模型）
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素（getElementById, getElementsByClassName等）、修改内容（innerHTML, innerText, textContent）、改变属性、添加/删除元素（appendChild, removeChild）和调整样式。此外，addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
15 2
|
9天前
|
XML JavaScript 数据格式
Beautiful Soup 库的工作原理基于解析器和 DOM（文档对象模型）树的概念
【5月更文挑战第10天】Beautiful Soup 使用解析器（如 html.parser, lxml, html5lib）解析HTML/XML文档，构建DOM树。它提供方法查询和操作DOM，如find(), find_all()查找元素，get_text(), get()提取信息。还能修改DOM，添加、修改或删除元素，并通过prettify()输出格式化字符串。它是处理网页数据的利器，尤其在处理不规则结构时。
40 2
|
9天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
18 0
|
9天前
|

18 0
|
9天前
|

9 0