Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to detect collision between two elements.

    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 1.06k
    Answer it

    Can any one give me the idea. How I can detect collision between 2 dom element. I have got this code form MDN. But can't go thorough it. Please help me. var rect1 = {x: 5, y: 5, width: 50, height: 50} var rect2 = {x: 20, y: 10, width: 10, height: 10} if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y) { // collision detected! } // filling in the values => if (5 < 30 && 55 > 20 && 5 < 20 && 55 > 10) { // collision detected! }

 1 Answer(s)

  • Hi, I have build a simplified example for you. I build a collide functionality by using jquery drag effect. Please go through below code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>Element Collision Testing</title> 
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    
      <script type="text/javascript">  
          $(document).ready(function(e) { 
              $('.elem2').draggable({ 
                //Start Drag Function
                  drag: function(){
                    //Element 1 properties 
                    var elem1X = $('.elem1').offset().left; 
                    var elem1Y = $('.elem1').offset().top; 
                    var elem1Width = $('.elem1').width(); 
                    var elem1Height = $('.elem1').height(); 
    
                    //Element 2 properties
                    var elem2X = $('.elem2').offset().left; 
                    var elem2Y = $('.elem2').offset().top; 
                    var elem2Width = $('.elem2').width(); 
                    var elem2Height = $('.elem2').height(); 
    
                     if (elem1X < elem2X + elem2Width && elem1X + elem1Width > elem2X && 
                          elem1Y < elem2Y + elem2Height && elem1Height + elem1Y > elem2Y ){ 
                              console.log("Elem 2 Div Collides "); 
                              $(this).css('background-color', 'yellow'); 
                    } else {        
                        $(this).css('background-color', 'blue'); 
                    }     
                  }//End Drag Function//
              });  
          });//Document Ready Function End//
    
    </script> 
    
    <style type="text/css">  
      .elements { position:absolute; } 
      .elem1 { 
        width:50px; 
        height:50px; 
        background: red; 
        top:5px; 
        left:5px;
      } 
      .elem2 { 
        width:60px; 
        height:40px; 
        background: blue; 
        top:60px; 
        left:60px;
      } 
    </style> 
    
    </head>

    <body> <div style="width:80%; margin:0 auto; padding:5px 5px; border:2px solid #a9a9a9; position:relative;"> <div id="cr-stage" style="height:400px;"> <div class="elem1 elements"></div> <div class="elem2 elements"></div> </div> <p>Drag the second rectangle. Yellow background means collision, blue means no collision.</p> </div> </body> </html>

    Use this code and I hope it will help you :)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: