How to Code: Rectangular Collision Detection with JavaScript

Rectangular collision detection is a must-know when it comes to video game development. It's a way to tell when two objects touch, so you can call some sort of reactionary event in return, such as gaining a power-up, or ending the game. Here I'll show you how rectangular collision detection works from a high-level perspective, then walk you through how to implement the effect using HTML canvas and JavaScript.

0:00 - How it works
2:07 - Detection on the x-axis
6:40 - Detection on the y-axis (with x-axis)

[muhzungoo]

Every one of these tutorials is absolute gold, dude

[losrobbosful]

Best channel on JS Game Development by far. The variety of your game demos is mind blowing. Keep it up, pleaaaase :) We profit all so much from you

[meosky]

i've been wrecking my head to find the formulas for the collisions and you avoided me some more headaches, thanks you very much <3

[tim.e.l]

I appreciate you adding in the part about using variables or OOP to make the code cleaner / more dynamic. Great tutorial as always.

This reminds me of the c++ code I had to write in highschool back in 2003 ish when we made pong and had to detect if the ball hit the paddle.

[fourty]

Like how you started with the conditions then the code, was easy to understand

[MaxChip]

thank you this has helped me to create collisions in my java game

[gektorix]

Just a comment to support the channel. Keep up the good work. Very interesting content.

[santiagofantoni]

first time someone has explained the "x+width <= other.x &&..." to make sense, thanks a lot man.

[suyci]

I don't even code, but it's so much fun to see where games go wrong through these tutorials

[novanoid]

This really helped me out so much because i couldn't figure out how to code it, thank you!

[Coreplay_]

Thanks for this! I've been trying to detect collisions in the game im making for ages. I'm going to try this soon.

[tomergngn]

something you can do to simplify the code if you want to work efficiently, is to follow the following steps.

Let the width of the rectangles be w, and their x coordinates be x1 and x2.

we know as proven in this video that when the rectangles collide, the following statements are true:
1. x1 + w >= x2
2. x1 <= x2 + w

let's look at 1.:
1. x1 + w >= x2
1. w >= x2 - x1

let's look at 2.:
2. x1 <= x2 + w
2. 0 <= x2 + w - x1
2. -w <= x2 - x1

if we'll combine the simplified equations, we'll get:
-w <= x2 - x1 <= w


by the definition of inequivalents in absolute values, we'll get:
|x2 - x1| <= w

now to turn it to code, we can simply change the absolute value symbol:
abs(x2 - x1) <= w

Let the height of the rectangles be h
we'll do the same for y2 and y1. and we'll get the following "if" statement:
if( abs(x2-x1) <= w &&
abs(y2-y1) <= h
)

this cuts the computing time of hitboxes in half, saving precious computing time when dealing with lots of hitboxes.

[andrecoccoconde]

Doing God's work my man. Thank you so much for such a great and illustrative tutorial.

[dweebycat]

Thank you for this video! Really helped with my assignment!

[parnasmi]

Very usefull video about html canvas rectangle collision detection. Thank you!

[andreagi]

Great video! Would love to see one for arbitrary polygons.

[mirzakadic]

Hi, could you please tell me which skin/style you used for VS code, like the colors and font. Thanks!

[Rico-cpxp]

Great video! Thanks for the clear instructions.

[bhasim]

you are the only one that explains schit well and not like a 40 year physisit

[MkhitarKojoyan]

But in case that we need to detecte which side wetouching what is the best methode? to know which velocity to reset to 0
bc if i can move my character with AWSD, i need to know which side of my rec is touching to know which key to restrect from moving