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

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



一对一碰撞检测

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


情况1targetmove上角


情况2targetmove右上角


情况3targetmove


情况4targetmove右下角

重叠阴影面积算法

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是移动物体

这里就需要去遍历所有的target,计算每个重叠面积大小,挑出面积最大的那一个。

为了方便计算比较,我们通常是在上面的代码基础上加一个面积大小判断,重叠面积超过target面积一半的情况就认为是碰撞对象

​//判断多个矩形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天前
|
缓存 JavaScript 前端开发
Vue.js计算属性:实现数据驱动的利器
Vue.js计算属性:实现数据驱动的利器
|
19小时前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
7天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
9天前
|
缓存 JavaScript C++
浅谈Vue.js的计算属性computed
浅谈Vue.js的计算属性computed
9 0
|
9天前
|
JavaScript 前端开发 算法
在JavaScript中实现的基本AABB矩形碰撞检测用于2D游戏
【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天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
9天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)