时间戳

首页 > 解决方案 > 指示元素相互交叉

javascript - 指示元素相互交叉

问题描述

我正在开发一个 JavaScript 简单游戏（游戏就像一个谷歌浏览器在没有网络的情况下显示）。

我想规定传入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
}

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

暗示：

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>

标签： javascriptset-intersection

解决方案

感谢我们的同事向我推荐 JavaScript：碰撞检测

这解决了我的问题。

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))
    );
}

谢谢

推荐阅读