2

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 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. 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);
jack_of_all_trades
  • 332
  • 1
  • 10
  • 2
    Your code is working fine. The problem is that you are not seeing the speed decrease, but it is decreasing. – davidbuzatto Oct 01 '15 at 19:59
  • @davidbuzatto If it is decreasing, why am I not seeing it? – jack_of_all_trades Oct 01 '15 at 20:07
  • Because your animation loop is running super fast. Try to increase the update time in your setInterval functions and you will note the speed changes (try something like 1000ms). – davidbuzatto Oct 01 '15 at 20:12
  • P.S. Your code needs lots of refactoring... I'm trying to organize it better. I will post to you. – davidbuzatto Oct 01 '15 at 20:17
  • @davidbuzatto Thank you very much! As you can probably tell, I'm pretty new to using JS, so organization is something I definitely struggle with right now. About the speed itself, 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 (even with `setInterval` at 20ms), [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. – jack_of_all_trades Oct 01 '15 at 20:27
  • @davidbuzatto I was going through the urls for my fiddle, seeing what people have added. Did you write [this fiddle](http://jsfiddle.net/5sy1tg36/24/)? It works! – jack_of_all_trades Oct 01 '15 at 23:13

0 Answers0