Is this a bug? (JavaScript conditional)

Question

I've got some code for part of a game where an absolutely positioned div (id = 'cursor') follows your mouse's cursor around. When the cursor div runs into another div (class = 'thing') (these are the white boxes in the jsfiddles), the cursor speed changes.

In this JSfiddle (https://jsfiddle.net/5sy1tg36/15/) you'll see that it works perfectly fine. When cursor hits thing, cursor speeds up. This is the conditional used to change the speed (newSpeed is what determines the speed for cursor):

if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
    newSpeed = 200;
    changeCursorSpeed();
} else {
    newSpeed = 12;
    changeCursorSpeed();
    console.log('hit');
}

The problem I'm having is when I switch around the values for newSpeed in the conditional:

if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
    newSpeed = 12;
    changeCursorSpeed();
} else {
    newSpeed = 200;
    changeCursorSpeed();
    console.log('hit');
}

Here's the JSFiddle for this: https://jsfiddle.net/5sy1tg36/16/. This causes the collision to not change newSpeed in the else part of the condition. However, using console.log('hit'), you can clearly see that the collision is detected.

Logically, this doesn't seem to make sense. I'd like to hear input from others about this as well as possible solutions. Thanks for any help.

Here's the entire code for the collision detection. The JSfiddles have a more complete code for the program.

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

One more thing to mention: if you remove one of the thing divs so there is only one left, you will see cursor slow down like it's supposed to, as you'll see here: https://jsfiddle.net/5sy1tg36/22/. The problem arises when there are more than one thing divs. Yet .each() seems to be looping through the collection correctly.

Answer 1 · 2015-10-01T22:34:42Z

October 1, 2015 10:34pm

When you have more than one .thing divs your .cursor div can only be in collision with one. So when you use each() to go through them it will log the one collision but the speed will be normal for the one that is missed, depending on the order they're evaluated. Given the way you're moving the cursor is incrementing the mouse position for every step of the each() loop, instead of determining the speed and incrementing the position afterwards, it will always go fast, just a bit more that half as fast when colliding with a box instead of slow.

Welcome to the Treehouse Community

Looking to learn something new?

Chris Andruszko

Chris Andruszko

Is this a bug? (JavaScript conditional)

1 Answer

Seth Kroger

Seth Kroger