How to Detect If Two Divs Are Touching/ Collision Detection

var character = document.getElementById("character");
var ground    = document.getElementById("ground");

//We could use getComputedStyle to get the style props,
//but I'm lazy
character.style.top = "10px";
character.style.height = "40px";
ground.style.top = "250px";

//For every 33ms (about 30fps)
setInterval(function(){
    
    //Get the height and position of the player
    var charTop    = parseInt(character.style.top),
        charHeight = parseInt(character.style.height);
    
    //and the top of the ground
    var groundTop = parseInt(ground.style.top);
    
    //linear gravity? Why now?
    charTop += 5;
    
    //If the character's bottom is hitting the ground,
    //Stop moving
    if(charTop + charHeight > groundTop) {
        charTop = groundTop - charHeight;    
    }
    
    //Set the character's final position    
    character.style.top = charTop + "px";
},33);

#character {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50px;
    background-color: #F00;
}

#ground {
    position: absolute;
    width: 300px;
    height: 60px;
    left: 0px;
    background-color: #A66;
}

<div id="character"></div>
<div id="ground"></div>

Check collision between certain divs

Okay, I ended up using a modified version of this duplicate. The function which does the work is:

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width() / 2;
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

And it is called by using overlaps( div1, div2 ); (returns true or false).

Collision between two div vanillaJS no detection

You have a few issues..

1. getElementsByClassName returns an HTMLCollection, not a single element. You need to either iterate over these if you have more than one. Or if there's just one of each class, just use querySelector.
2. If you want to use the element's x, y, you need to get it's DOMRect using getBoundingClientRect.

Try this instead:

let rect1 = document.querySelector('.perso').getBoundingClientRect();
let rect2 = document.querySelector('.obstacle').getBoundingClientRect();

Collision detection with JavaScript. (Check if 2 Block Level elements are touching)

You can use the Jquery collision plugin like this:

var x = $("#div1").collision(".div2");

Javascript: Detect colliding divs

You need to loop through each div, and then compare with every other div in a nested loop. Then use logic like what you've written to compare each combination. Here is an example that simply prints out the overlapping divs to the output (note also that I changed the height element to have a numerical value rather than text so that its value could be used in calculations):

var divs = [
    {class:'A', top:0,   left:0,   height:60},
    {class:'B', top:50,  left:60,  height:60},
    {class:'C', top:30,  left:10,  height:60},
    {class:'D', top:100, left:180, height:60},
    {class:'E', top:80,  left:50,  height:60},
    {class:'F', top:110, left:200, height:60},
    {class:'G', top:55,  left:80,  height:60}
];

for (var i=0; i < divs.length - 1; i++)
    for (var j=i+1; j < divs.length; j++)
    {
        var I=divs[i];
        var J=divs[j];

        if ( (I.top <= J.top && (I.top + I.height) >= J.top) ||
             (J.top <= I.top && (J.top + J.height) >= I.top) )
            document.writeln(
                I.class + " collides with " + J.class + "<br />");
    }

Output:

A collides with B
A collides with C
A collides with G
B collides with C
B collides with D
B collides with E
B collides with F
B collides with G
C collides with E
C collides with G
D collides with E
D collides with F
D collides with G
E collides with F
E collides with G
F collides with G

Sample working code: http://jsfiddle.net/QUrWM/

how can i check if two div touch each other in javascript

At the moment you're assigning the bounding rectangles of your game objects to the variables carRightBound & playerBound once before starting the interval.
That means it's values won't ever get updated anymore. You should update them inside the callback function.

Furthermore the interval of 5000ms is way too long. A lot of stuff can have happenend on screen during 5 seconds. Try reducing it to 50ms for example.

Lastly I'm not too sure about your collision detection anyhow. You aren't paying attention to the size of your objects.

Try this code:

setInterval(function() {
  var playerBound = player.getBoundingClientRect();
  var carsRight = document.querySelectorAll('.carRight');
  var carRightBound;

  for (var a = 0; a < carsRight.length; a++) {
    carRightBound = carsRight[a].getBoundingClientRect();
    if (playerBound.x > carRightBound.x - playerBound.width && playerBound.x < carRightBound.x + carRightBound.width && playerBound.y > carRightBound.y - playerBound.height && playerBound.y < carRightBound.y + carRightBound.height) {
      console.log('The divs are intersecting!');
      alert('on here')
    } else {
      console.log('The divs are not intersecting.');
    }
  }
}, 50);

---

Related Topics