How to detect the collision between two squares / rectangles

To show how collision detection works between two objects, I'm going to use two% square% in a 2D plane , but collision detection can be applied to any object form, as long as we have the dimensions of the objects in question and this concept also serves for 3D planes, the difference between 2D and 3D is that in 3D we work with three dimensions (x, y, z) while in 2D they are only two (x, y), which makes the process much simpler.

Thetwoobjects(div's)willhavethefollowingdimensions,thefirstdiv's(blue)is100pxhighand100pxwide,theseconddiv(red)ishalfthesizeofthefirst,so50pxtalland50pxwide.

Position

Togetthepositionoftheelementwehavetwooptionsdivor.position(),method.offset()returnsthelocationrelativetothenearestancestor,while.position()returnsthepositionrelativetothedocument.Iwillnotthoroughlyexplainthemethodsifyouwanttounderstandmoreaboutthem click here , in the example in question it makes no difference because the parent element or ancestral is the document itself.

Collision

The collision in this context that we created, considering only these two elements, will happen when the following conditions are true:

Horizontally:

When the rightmost edge of the leftmost element ( A2 ) is greater than or equal to the leftmost edge of the rightmost element ( V1 ) and less than or equal to the right of the rightmost element ( V2 ).

V1