Check If Two Div HTML Elements Intersect

How to detect if two divs are touching/ collision detection

There's probably a better way (this isnt very DRY) but it should work, simply replace "div1" and "div2" with your div IDs:

let div1 = document.getElementById('div1').getBoundingClientRect();
let div1Top = div1.top;
let div1Left = div1.left;
let div1Right = div1.right
let div1Bottom = div1.bottom

let div2 = document.getElementById('div2').getBoundingClientRect();
let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right
let div2Bottom = div1.bottom

if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) {
  let verticalMatch = true
} else{
  let verticalMatch = false
}

if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) {
  let horizontalMatch = true
} else {
  let horizontalMatch = false
}

if (horizontalMatch && vertialMatch){
  let intersect = true
} else {
  let intersect = false
}

Detecting whether two divs overlap

There is already a query here having an answer : How to detect if two divs touch with jquery?

For reference I copy the code here:

function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var y1 = $div1.offset().top;
      var h1 = $div1.outerHeight(true);
      var w1 = $div1.outerWidth(true);
      var b1 = y1 + h1;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var y2 = $div2.offset().top;
      var h2 = $div2.outerHeight(true);
      var w2 = $div2.outerWidth(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;

      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
      return true;
    }

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);

How to check if two elements are intersecting in vanilla JavaScript?

Using standard DOM techniques, you can iterate over each LI element and obtain a bounding rectangle, which gives the coordinates of the LI's rectangle.

Do this for the selection rectangle too and then you can simply check whether the coordinates are within the range of the selection's.

Element.getBoundingClientRect()

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

The returned value is a DOMRect object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.

The returned value is a DOMRect object, which contains read-only left, top, right, bottom, x, y, width, height properties describing the border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.

Please see below, the edited code which selects the LI elements that are fully contained or partially intersecting the selection.

var selection = document.querySelector(".selection");
var rectSelection = selection.getBoundingClientRect();

// Iterate over all LI elements.
[].forEach.call(document.querySelectorAll("li"), function(li) {
    var rect = li.getBoundingClientRect();

    if(rect.bottom > rectSelection.top 
    && rect.right > rectSelection.left 
    && rect.top < rectSelection.bottom 
    && rect.left < rectSelection.right) {
        li.classList.add("selected");
    }
});

.widget {
  width: 320px;
  height: 200px;
  border: 1px solid gray;
  position: absolute;
  overflow: scroll;
}
.selection {
  position: absolute;
  top: 90px;
  left: 90px;
  border: 1px dotted black;
  height: 120px;
  width: 120px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  background: blue;
  width: 40px;
  height: 40px;
  margin: 10px;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
  <div class="selection"></div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

var span = document.getElementsByTagName("span")[0]var btn = document.getElementsByTagName("button")[0]
if(touches(span, btn)){  console.log('touching!')}
function touches(span, btn) {   var rect1 = span.getBoundingClientRect();   var rect2 = btn.getBoundingClientRect();
  if (rect1.right == rect2.left) {     return true;  }}

<span>Span</span><button>Btn</button>

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 />");
    }

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