如何检测两个div是否接触碰撞？JS游戏元素碰撞触发功能求助

问题修复说明 #

你的代码存在4个核心错误，修改后即可正常运行：

• jQuery选择器误用：函数入参$store、$mario已经是jQuery实例对象，不需要再套$()重复选择，原代码里$("$store")的写法是在查找名为$store的DOM节点，永远获取不到正确值
• 宽度计算笔误：计算马里奥元素宽度w2时错误调用了outerHeight()方法，导致横向碰撞判断逻辑完全失效
• 语法错误：函数定义结束后存在多余的});、末尾多余闭合大括号，会直接触发JS报错终止运行
• 触发逻辑缺失：当前碰撞检测仅在页面加载时执行1次，马里奥移动时不会重新判断，需要把检测逻辑封装后在马里奥移动事件/定时器中重复调用

修复后参考代码 #

// 碰撞检测函数
function collision($store, $mario) {
    var x1 = $store.offset().left;
    var y1 = $store.offset().top;
    var x2 = $mario.offset().left;
    var y2 = $mario.offset().top;
    var h1 = $store.outerHeight(true);
    var w1 = $store.outerWidth(true);
    var h2 = $mario.outerHeight(true);
    var w2 = $mario.outerWidth(true); // 修复：将outerHeight改为outerWidth
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var b2 = y2 + h2;
    var r2 = x2 + w2;
    return !(b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2);
}

// 检测逻辑封装，可在马里奥移动时重复调用
function checkCollision() {
    var state = document.getElementById('state');
    if (collision($('.store'), $('.mario'))) {
        state.innerText = "Touching !!!";
        // 此处添加你需要的弹窗逻辑即可
    } else {
        state.innerText = "No collision";
    }
}

// 示例：每100ms检测一次，也可以绑定到马里奥的移动事件触发，性能更好
setInterval(checkCollision, 100);

内容的提问来源于stack exchange，提问作者Shivali