可重复使用的命中测试/碰撞检测答案

【问题标题】：reusable hit test / collision detection可重复使用的命中测试/碰撞检测
【发布时间】：2014-11-04 09:53:21
【问题描述】：

我有一个设定的时间间隔来检查我的雪橇是否撞到树上。

var sled =  $("#sled") 
var tree =  $(".tree")

var hitting = setInterval(function() {
var treeHit = hitTest(sled,tree )
if (treeHit == true ) {
    gameOver()
}

}, 1);

调用我的 hitTest 函数，返回 true 或 false。

function hitTest(a, b) { 
var aTop = a.offset().top;
var aLeft = a.offset().left;
var bTop = b.offset().top;
var bLeft = b.offset().left;

return !(
    ((aTop + a.height()) < (bTop)) ||
    (aTop > (bTop + b.height())) ||
    ((aLeft + a.width()) < bLeft) ||
    (aLeft > (bLeft + b.width()))
);
}

这很好用，但仅适用于具有“树”类的第一个 dom 元素（我有多个），我不确定为什么它不适用于所有人？

【问题讨论】：

$(".tree") 返回匹配元素的 jQuery 集合。您需要遍历此集合（使用.each()）以检查与tree中的每个项目的冲突

标签： jquery collision-detection hittest

【解决方案1】：

绝对是数组而不是元素的问题。我会将函数更改为

    var hitting = setInterval(function () {
        var treeHit = false;
        $('.tree').each(function () {
            treeHit = hitTest(sled, $(this));
            if (treeHit == true) {
                console.log('hit');
            }
        });
    }, 1);

这是一个工作小提琴

http://jsfiddle.net/11cb5s74/

【讨论】：

【解决方案2】：

尝试类似：

$.each($('.tree'), function(tree){
    treeHit = hitTest(sled, tree);
    return treeHit;
});

【讨论】：