Question

获得建议使用碰撞检测的“风格”而不是jQuery Collision -

function isCollide(a, b) {
    return !(
        ((a.y + a.height) < (b.y)) ||
        (a.y > (b.y + b.height)) ||
        ((a.x + a.width) < b.x) ||
        (a.x > (b.x + b.width))
    );
}

我正在尝试但是遇到了一个问题：在发生冲突时发生的“其他”部分由于某种原因瞬间发生，只要页面被加载。< / p>

Here是小提琴。

这是功能：

function homePage() {

    //initial animation
    for (var i=0; i<links.length; i++) {
        //animate links
        $(links[i]).animate({
            top: '0'
        }, {
            duration: 2000*(Math.random()*(1.1)+1), 
            easing: 'easeOutBounce',
            step: function() {

                if ($(links[i]).x > ($(".footer").x + $(".footer").width) 
                || $(links[i]).y > ($(".footer").y + $(".footer").height) 
                || ($(links[i]).x + $(links[i]).width) < $(".footer").x 
                || ($(links[i]).y + $(links[i]).height) < $(".footer").y)
                {
                    $(links[i]).css("background-color", "yellow");
                } 
                else 
                {
                    $(links[i]).css("background-color", "red");
                }
            }
        })
    }
}

Answer 1

我看到了这些错误：

调用步进函数时，i等于links.length。阅读JavaScript闭包如何工作？了解有关此错误的更多信息。一个简单的解决方案是使用Array.forEach（或$.each）：FIDDLE
```
links.forEach(function(linkId){
    var $link = $(linkId);
    //...
});
```

jquery对象上没有.x和.y，而是使用.offset().left和.offset().top：FIDDLE

if ($link.offset().left > ($(".footer").offset().left + $(".footer").width) //...

在jquery对象上，width和height是函数：FIDDLE

if ($link.offset().left > ($(".footer").offset().left + $(".footer").width()) //...

这应该足以修复您的代码。还尝试使用更多变量，这将清理代码并帮助您找到错误。

这三个错误使条件总是等于假：

i等于links.length，因此links[i]未定义且$(links[i])是一个空的jQuery对象。你找不到空jQuery对象的位置和大小（这不是你想要的，你想要DIV的位置和大小）
$link.x和$link.y未定义，因此您要比较要比较位置值的未定义值。
.width和.height是函数，而不是实际大小。同样，您要比较streange无意义的值，而不是比较右下角的位置值。

碰撞发生碰撞的结果实际发生

1 个答案: