div collision detection not working

Question

I have written the following code for collision detection of two divs:

HTML:

<body>  
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <div class="moveright">
      <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/></div>
    <div class="moveleft"><img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/></div>      
</body>

CSS:

body{
background:#fff;
}
body > img{
width:200px;
}

.leftwheel {  
    width:200px;
    -webkit-animation: rotationLeft 2s infinite linear;
    animation: rotationLeft 2s infinite linear;
  -moz-animation: rotationLeft 2s infinite linear;
}
@-webkit-keyframes rotationLeft {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotationLeft {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotationLeft {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

.rightwheel {
    width:200px;
    -webkit-animation: rotationRight 2s infinite linear;
    animation: rotationRight 2s infinite linear;
  -moz-animation: rotationRight 2s infinite linear;
}
@-webkit-keyframes rotationRight {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(-359deg);}
}
@-moz-keyframes rotationRight {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(-359deg);}
}
@keyframes rotationRight {
    from {transform: rotate(0deg);}
    to   {transform: rotate(-359deg);}
}

.moveleft {
    z-index:-1;
    right: 0px;
    top: 0px;
    position:absolute;
    -webkit-animation: movementLeft 5s linear forwards;
    animation: movementLeft 5s linear forwards;
  -moz-animation: movementLeft 5s linear forwards;
}
@-webkit-keyframes movementLeft {
    from {margin-right:0%;}
    to   {margin-right:80%;}
}
@-moz-keyframes movementLeft {
    from {margin-right:0%;}
    to   {margin-right:80%;}
}
@keyframes movementLeft {
    from {margin-right:0%;}
    to   {margin-right:80%;}
}
.moveright {  
    z-index:10;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-animation: movementRight 5s linear forwards;
    animation: movementRight 5s linear forwards;
  -moz-animation: movementRight 5s linear forwards;
}
@-webkit-keyframes movementRight {
    from {margin-left:0%;}
    to   {margin-left:80%;}
}
@-moz-keyframes movementRight {
    from {margin-left:0%;}
    to   {margin-left:80%;}
}
@keyframes movementRight {
    from {margin-left:0%;}
    to   {margin-left:80%;}
}
}

Javascript:

$(function() {
    var $leftWheel = $('div.moveright'),
        $rightWheel = $('div.moveleft');

    function isCollide() {
        return !(
            ((leftWheel.y + leftWheel.height) < (rightWheel.y)) ||
            (leftWheel.y > (rightWheel.y + rightWheel.height)) ||
            ((leftWheel.x + leftWheel.width) < rightWheel.x) ||
            (leftWheel.x > (rightWheel.x + rightWheel.width))
        );
    }

    function performCollisionCheck() {
        if(isCollide()) {
            performCollisionAction();
        }
        //performCollisionCheck();
    }

    function setPerformCollisionCheck() {  
        var timer;
        timer = setTimeout(performCollisionCheck(),5);
    }

    function performCollisionAction() {
        alert("collided");
    }
    setInterval(performCollisionCheck, 5);
});

The animation is happening correctly but the collision test always return false. Even when the objects are colliding it shows that the objects are not overlapping. I have double checked the condition and verified that everything is working fine. What is the issue here? How to solve it?

DEMO

Answer 1

here is the fix of your code: http://jsfiddle.net/4Hd7D/20/

$(function() {
    var leftWheel = $('div.moveright'),
        rightWheel = $('div.moveleft');

    function isCollide() {
        return !(
            ((leftWheel.offset().top + leftWheel.height()) < (rightWheel.offset().top)) ||
            (leftWheel.offset().top > (rightWheel.offset().top + rightWheel.height())) ||
            ((leftWheel.offset().left + leftWheel.width()) < rightWheel.offset().left) ||
            (leftWheel.offset().left > (rightWheel.offset().left + rightWheel.width()))
        );
    }

    function performCollisionCheck() {
        if(isCollide()) {
            performCollisionAction();
        }
        //performCollisionCheck();
    }

    function setPerformCollisionCheck() {  
        var timer;
        timer = setTimeout(performCollisionCheck(),5);
    }

    function performCollisionAction() {
        console.log("collided");
    }
    setInterval(performCollisionCheck, 5);
});

the problem:

there is no leftWheel.y or leftWheel.x ! "x" and "y" are not defined, instead you must use leftWheel.offset().top and leftWheel.offset().left
you have define $leftWheel but in your code used leftWheel which I changed it!
instead of alert() (which is by the way so annoying) use console.log()
height and width are functions, so they must be used as height() and width()

div collision detection not working

Question

1 answers

solution1
2 ACCPTED 2014-07-18 09:07:05

div collision detection not working

Question

1 answers

solution1 2 ACCPTED 2014-07-18 09:07:05

solution1
2 ACCPTED 2014-07-18 09:07:05