这是虫子吗？（JavaScript条件）

我有一些游戏的代码，其中一个绝对定位的div（

id='cursor'

）跟随鼠标的光标。当

光标

div运行到另一个div（

class='thing'

）（这些是jsfiddle中的白色框）时，

光标

速度会改变

你会发现它工作得非常好。当

光标

点击

东西

，

光标

加速。这是用于更改速度的条件（

newSpeed

是决定

光标速度的因素）：

这会导致冲突在条件的
else
部分中不会更改
newSpeed
。但是，使用
console.log（'hit'）
，您可以清楚地看到已检测到碰撞

从逻辑上讲，这似乎没有道理。我想听听其他人对此的意见以及可能的解决方案。谢谢你的帮助

下面是碰撞检测的全部代码。jsfiddle有一个更完整的程序代码

var newSpeed;
var newInt = setInterval(function() {
function collision($cursor, $thing) {
    var x1 = $cursor.offset().left;
    var y1 = $cursor.offset().top;
    var h1 = $cursor.outerHeight(true);
    var w1 = $cursor.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;

    $thing.each(function(i){
        var x2 = $(this).offset().left;   
        var y2 = $(this).offset().top;
        var h2 = $(this).outerHeight(true);
        var w2 = $(this).outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
            newSpeed = 12;
            changeCursorSpeed();
        } else {
            newSpeed = 200;
            changeCursorSpeed();
            console.log('hit');
        }
    });
    function changeCursorSpeed(){
        $xp += (($mouseX - $xp)/newSpeed);
        $yp += (($mouseY - $yp)/newSpeed);
        $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 
    }
}
    $(collision($('#cursor'), $('.thing')));
}, 20);

var-newSpeed；
var newInt=setInterval（函数（）{
函数冲突（$cursor，$thing）{
var x1=$cursor.offset（）.left；
变量y1=$cursor.offset（）.top；
var h1=$cursor.outerHeight（true）；
var w1=$cursor.outerWidth（true）；
var b1=y1+h1；
var r1=x1+w1；
$thing.每个（功能（i）{
var x2=$（this）.offset（）.left；
var y2=$（this）.offset（）.top；
var h2=$（this）.outerHeight（true）；
var w2=$（this）.outerWidth（true）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | | r1r2）{
新闻速度=12；
changeCursorSpeed（）；
}否则{
新闻速度=200；
changeCursorSpeed（）；
console.log（'hit'）；
}
});
函数changeCursorSpeed（）{
$xp+=（$mouseX-$xp）/newSpeed）；
$yp+=（$mouseY-$yp）/新闻速度）；
$（“#游标”）.css（{左：$xp+'px'，顶：$yp+'px'}）；
}
}
$（碰撞（$（'光标'），$（'物体'））；
}, 20);
您的代码工作正常。问题是你没有看到速度下降，但它正在下降。@davidbuzatto如果速度下降，为什么我看不到？因为你的动画循环运行得非常快。尝试增加setInterval函数中的更新时间，您会注意到速度的变化（尝试1000ms）。您的代码需要大量重构。。。我正在努力把它组织得更好。我会给你发邮件的。@davidbuzatto非常感谢你！正如你们可能知道的，我对使用JS还很陌生，所以组织是我现在必须面对的问题。关于速度本身，如果您删除一个
thing
div，这样只剩下一个，您将看到
光标
按预期减速（即使
setInterval
为20ms），当有多个
thing
div时，问题就会出现。然而，
.each（）
似乎正确地在集合中循环。
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
    newSpeed = 12;
    changeCursorSpeed();
} else {
    newSpeed = 200;
    changeCursorSpeed();
    console.log('hit');
}

var newSpeed;
var newInt = setInterval(function() {
function collision($cursor, $thing) {
    var x1 = $cursor.offset().left;
    var y1 = $cursor.offset().top;
    var h1 = $cursor.outerHeight(true);
    var w1 = $cursor.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;

    $thing.each(function(i){
        var x2 = $(this).offset().left;   
        var y2 = $(this).offset().top;
        var h2 = $(this).outerHeight(true);
        var w2 = $(this).outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
            newSpeed = 12;
            changeCursorSpeed();
        } else {
            newSpeed = 200;
            changeCursorSpeed();
            console.log('hit');
        }
    });
    function changeCursorSpeed(){
        $xp += (($mouseX - $xp)/newSpeed);
        $yp += (($mouseY - $yp)/newSpeed);
        $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 
    }
}
    $(collision($('#cursor'), $('.thing')));
}, 20);