How to Check for overlap Between Two Page elements Colission Detection

February 27, 2022 by Laurence Svekis

Check out the Collision Interactive at

Commonly in Games when page elements are moving, there needs to be a way to check if overlap has occurred. There is a formula that can be used which checks the x,y position of each element, as well needs the width and height of the element.

X-Horizontal check formula : (a.x < (b.x + b.width)) && ((a.x + a.width) > b.x);

y-Vertical check formula : (a.y < (b.y+b.height)) && ((a.y + a.height) > b.y);

To get the element information, about the size and position there is a method that can be used.

Element.getBoundingClientRect() method

The value that is returned from this element is the smallest rectangle of the entire page element, including the padding and border. This method can be applied to an element to get the bottom, left, right, and top position from the page. In addition the x, y, positions, relative to the top-left of the viewport, and the height and width of the page element.

console.log(box3.getBoundingClientRect());