How to detect if two divs are touching/ collision detection

jquery collision detection demo
collision detection javascript
getboundingclientrect alternative
javascript check if two divs overlap
getboundingclientrect returns 0
getboundingclientrect is not a function
jquery check if element is over another
getboundingclientrect scroll

I have searched all over Google and here for this but haven't found an answer that suits my problem

(This is a really simplified explanation) I have two divs which can be moved by the user (using JavaScript and click events) I need to detect if the two divs are touching/on top of each other and if they are to trigger a function I have seen answers on here but they all use jQuery and I want to use pure JS

Something that might be useful is that both divs have position absolute and different z-indexes set in css

EDIT: to clear things up since my explanation was very poor one of the two divs is stationary and the second can only move in the Y direction but the div that moves in the Y direction is rotating using a case animation

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 =;
let div1Left = div1.left;
let div1Right = div1.right
let div1Bottom = div1.bottom

let div2 = document.getElementById('div2').getBoundingClientRect();
let div2Top =;
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

Detect if two elements are colliding/overlapping · GitHub, @link​touch-with-jquery. * @param $div1. * @param $div2. * @returns {boolean}. */. Students learn about collision detection on the computer. Working in pairs, they explore how a computer could use sprite location and size properties and math to detect whether two sprites are touching. They then use the isTouching() block to create different effects when sprites collide, including playing sounds. Last, they use their new skills to improve the sidescroller game that they started in the last lesson.

try Element.getBoundingClientRect() on both divs and with their coordinates you can do collision detection

How to detect two elements colliding or overlapping in jQuery, If you want to know when two elements overlap or collide with each other, then this function “$( window ).resize(function(){});” to allow for continuous detection. CSS. div { width:100%; height:500px; background:#EEE; } #two  This tutorial introduces collision detection, which allows you to determine when two shapes touch. If you can determine that two shapes touch, you can trigger some action- think of detecting when the user has moused over a button, or when a game character touches the floor or a badguy, or when your animation reaches a certain state.

You could use the process described in this post by Anand Thangappan to get the computed location of the element. You could then get the computed width and height using getComputedStyle() (documentation here), and test if they intersect using simple inequality checks.

EDIT: Alternatively, you can just read their location values directly, since you're using absolute position. Then you can skip the more complicated way of getting the computed location of the element.

How to make two DIVs/Elements collide? (not go through other , I am using an animated DIV to make a game to practice and learn new things with coding. Developing jQuery Plugins, Developing jQuery UI, QUnit and Testing, About Before you move a div, you need to check that it will not hit a element. One is orbiting the other but they are one pixel from touching. Since you are allowing the user to move the DIVs and they're both absolute, you must have access to the STYLE attributes of the DIVs. Get the the top, left, width and height properties. Calculate the bottom and right properties. Now you have all four corner coordinates.

Since you are allowing the user to move the DIVs and they're both absolute, you must have access to the STYLE attributes of the DIVs.

Get the the top, left, width and height properties.

Calculate the bottom and right properties. Now you have all four corner coordinates.

Since they're both rectangles, you can check to see if the top or bottom of dev A is between the top and bottom of div B AND if the left or right is between the left and right of dev B.

The one good part about this is that you only have to check A -> B because any overlap would be detected in both tests.

This works because of the rectilinear nature of the shapes. It would be more complicated if these were triangles or pentagons, or if they were not convex shapes.

It's worth noting that if you're using CSS / JS animation, you may wish to enlarge the 'collision area' if you have objects moving at high speed. Otherwise, items might go through between checks.

How to detect 2 elements colliding or overlapping in jQuery, How to detect 2 elements colliding or overlapping in jQuery Having issues with collision detection on those 2 <div> tags of yours? var overlap = isOverlap("#​one","#two"); if (overlap) { // Do something when elements are  The best way to detect a collision between two sprites is to have speed variables attached to each sprite, for example if <<<<(BlueCarSpeed) > [20]> and <<(RedCarSpeed) > [20]> >> and < <touching [RedCar v] ?>>>> then do stuff end

This is similar to the current correct answer but what I did to solve this problem follows.

let d1 = document.getElementById('div1').getBoundingClientRect();
let d2 = document.getElementById('div2').getBoundingClientRect();

function touching(div1,div2){
    let ox = Math.abs(d1.x - d2.x) < (d1.x < d2.x ? d2.width : d1.width);
    let ox = Math.abs(d1.y - d2.y) < (d1.y < d2.y ? d2.height : d1.height);
    return ox && oy;

var t = touching(d1,d2) // should return whether they are touching

Note that this function will not work with transformations very well.

Collision Detection, So it can do a little check like: if an element of this size was at this position, does that fit within this area? If you didn't want to use jQuery UI, you  notme. You may need to check for collisions with an object that has the same index as the object that runs the code, so to prevent the code finding a collision with itself, you can set this to true. If you are specifically looking for the instance of the object running the code, or it's not important,

How to detect when user scrolls to the bottom of a div, The task is to detect the bottom of the <div> element when user scrolls to the bottom using JQuery. Here are few In the case of multiple event values, those are separated by space. Detecting when user scrolls to bottom of div. </ title >. This feature is not available right now. Please try again later.

Is it possible to make a collision detection without the use of canvas , if you want to check collision between 2 rectangles, the algorithm is something like this if(rect1.x < rect2.x + rect2.w && rect1.x + rect1.w >  Questions: How to detect if two elements have collided? The two divs are simple coloured boxes travelling perpendicular to each other, so no complicated shapes or angles.

How do I tell if two elements are touching eachother?, I am making a very simple game using java script and jquery how do I figure out when two divs are touching. 1 vote. permalink. Assuming fence and stickman are​ 

  • Well, then you have all coordinates and sizes of both boxes, you have just 4 inequalities to check, right? I mean, these are just two rectangles in Cartesian coordinates.
  • @NiVeR it's not a duplicate of post 5419134 since they asked for a solution with jQuery and I'm asking for a solution without jQuery
  • With a bit of changes your code worked great thank you very much :)