Search code examples
javascriptjqueryhtmlcsscollision-detection

div collision detection not working

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

Solution

  • 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:

    1. 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

    2. you have define $leftWheel but in your code used leftWheel which I changed it!

    3. instead of alert() (which is by the way so annoying) use console.log()

    4. height and width are functions, so they must be used as height() and width()