Learn Rectangular Collision Detection in Javascript!

Learn how to program a function that detects collision between arbitrary rectangles and squares in Javascript with this informative tutorial! If you're looking for collision response, it is not in this tutorial, this only covers detection.

[jimmyciaston]

Great series of videos ! Love the simplicity and the amount of detail you cram into these !

[taokodr]

So simple, clever, and efficient!
Going forward, I may start calling you sifu! :D
Thanks so much for sharing your knowledge!

[anmolkumarshah]

tq very much.. you save much time for me

[MoiNikLukaToni]

Чувак ты супер! Спасибо! Давно искал решение данной задачи. Я такие велосипеды писал а на самом деле все очень просто.

[abirneji]

I never thought to invert this to check for not collisions
why did I never think to invert this
that's so much more efficient

[tomli]

Hi, can I use your method in my program? and how do I cite it.

[aminelagab]

hey, very nice tutorial, simple to understand, can you please tell me where did you learn game developpement . is there any useful site or books to suggest ? and thank you again, like i said before, this channel is gold .

[yuzu]

Is there any way to ckeck with the red square the color with is next+under it?

[lollo]

Is there an easiest way? Because I tried to copy the codes but I got no resoults. I need hitboxes for making a maze and with this code: if(this.top > rectangle.bottom || etc..) I made the hitbox big as the whole canvas

[happytotter]

The only thing I cannot understand it’s if ur only checking in the y axis or x axis independently. How the program know The square is not above

For example

If(left side of the red square < right side of the white square)

The condition turn true when the square its above under or even in the other side

And “or” || doesn’t change anything because the condition will return true if only one of the condition are true.

I don’t understand 😪