指示元素彼此相交

Question

我正在开发一款 JavaScript 简单游戏（类似 google chrome 的游戏在没有网络的情况下显示）。

我想指示传入的 span 与第一个 span 联系。（麻烦与演员相交）

当前方法

let actor = $(el).find(".actor");
let mainOffset = toOffset($(actor).offset());
let incomingTrouble = $(".trouble")[0];
if(typeof incomingTrouble==="undefined")return;
let offset = toOffset($(incomingTrouble).offset());
if(offset.left<1){
    $(incomingTrouble).removeClass("trouble");
}
if((offset.left>0 && offset.left===mainOffset.left) && offset.top<=mainOffset.top){
    console.log("Dead");
    $("button").trigger("click");
    //Game over
}

上面的代码有一个问题，如果 actor 掉线并且问题还没有隐藏，则表明游戏已经结束，但实际上它们还没有相交。

hint:

toOffset(...) return 两位小数 offset.left 和 offset.top

html

<div class="" tabindex="0" id="jump_game">
    <section>
        <!-- game actor -->
        <span class="actor"><i class="zmdi zmdi-bike"></i></span>

        <!-- game strangers -->
        <span class="trouble stranger"><i class="zmdi zmdi-block"></i></span>
        <span class="trouble stranger"><i class="zmdi zmdi-block"></i></span>
        <span class="trouble stranger"><i class="zmdi zmdi-block"></i></span>
        <span class="trouble stranger"><i class="zmdi zmdi-block"></i></span>
        <span class="trouble stranger"><i class="zmdi zmdi-block"></i></span>
        <span class="trouble stranger"><i class="zmdi zmdi-block"></i></span>
        
    </section>
    <button><i class="zmdi zmdi-play"></i></button>
</div>

Answer 1

感谢为我指出 JavaScript: Collision detection

的同事

这解决了我的问题。

function isCollide(a, b) {
    var aRect = a.getBoundingClientRect();
    var bRect = b.getBoundingClientRect();

    return !(
        ((aRect.top + aRect.height) < (bRect.top)) ||
        (aRect.top > (bRect.top + bRect.height)) ||
        ((aRect.left + aRect.width) < bRect.left) ||
        (aRect.left > (bRect.left + bRect.width))
    );
}

谢谢

指示元素彼此相交

Dictate that elements have intersected each other

javascript

set-intersection