(isCrash メソッド) [すぐに使える] ネイティブ JS 衝突検出コア コード

---

//碰撞检测
isCrash(targetDom, moveDom) {
    /*
    targetDom：目标对象（即将要被碰撞的元素）
    moveDom：移动的对象（可能是拖拽移动，也可能是其他原因导致其移动）
    */
    if (targetDom === moveDom) return false;//如果目标对象和移动对象是同一个，返回未接触
    let tr = targetDom.getBoundingClientRect(), mr = moveDom.getBoundingClientRect();
    let t = { x1: tr.x, x2: tr.x + tr.width, y1: tr.y, y2: tr.y + tr.height };//目标对象的四角顶点坐标
    let m = { x1: mr.x, x2: mr.x + mr.width, y1: mr.y, y2: mr.y + mr.height };//移动对象的四角顶点坐标
    let a = { w: Math.min(t.x2, m.x2) - Math.max(t.x1, m.x1), h: Math.min(t.y2, m.y2) - Math.max(t.y1, m.y1) };//计算相交部分的宽度和高度
    let area = (a.w > 0 ? a.w : 0) * (a.h > 0 ? a.h : 0);//计算相交部分的面积
    return area ? true : false;//面积＞0，即碰撞（这里可以根据业务需求，改成相交部分面积＞具体的值才作为碰撞判断）
},

原理: 2 つのオブジェクトの交差面積が > 0 かどうかを計算します。