How to Code: Rectangular Collision Detection with JavaScript

Learn web development with 117+ additional tutorials only at chriscourses.com 🚀
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)

[@ChrisCourses]

#bringBackDislikes

[@LeviThoughts]

fr

[@muhzungoo5963]

Every one of these tutorials is absolute gold, dude

[@ChrisCourses]

Thanks man, we'll see if I can obtain the elusive, consistent release schedule for some more 😂

[@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.

[@ChrisCourses]

No problem-getting the code as clean as possible is almost just as important as learning the concept itself. Wanted to keep things as succinct as possible and not dive down any OOP rabbit hole.

[@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

[@dweebycat9929]

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

[@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.

[@Rico-cp4xp]

Great video! Thanks for the clear instructions.

[@gektorix]

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

[@MaxChip101]

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

[@santiagofantoni2643]

first time someone has explained the "x+width

[@parnasmi]

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

[@suyci]

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

[@ChrisCourses]

Thank you sir - have a couple more game concept-like explainers / tutorials coming out. Gonna try and do one on spritesheets next week.

[@andrecoccoconde3668]

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

[@bennydaniel93]

Amazing man!

[@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

[@michael22000]

Only works if the object have the same sizes.

[@tomergngn]

@@michael22000 true, but in this case they are the same size

[@gopinathkrm58]

amazing tutorial

[@andreagi8746]

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

[@ChrisCourses]

Thanks Andre! Collision detection for arbitrary polygons actually use, drum roll please, rectangles! You can create detection for complex shapes, but its typically CPU intensive and hard to actually implement. Therefore developers use rectangular hit-boxes as a way to get more precise detection. Check this article out and scroll down to the hitbox section to see what I mean-lots of good info in here: spicyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics

[@ChrisCourses]

@@bartdemeyere9766 Will check it out today 🙌

[@buz_zed]

Stg I've missed your vids man
Haven't been coding in a while though

[@adarshmaurya7553]

Amazing video

[@jerisbocou8802]

Awesome Wondefull and Genius and it's not enough

[@user-hj8rh2vi6x]

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

[@rajamohamed134]

@chrisCourses can you please make a video for collision for complex shape such as triangle?

[@mirzakadic9174]

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

[@user-ss3lr1ku4d]

Can you do a collision detection for a circle combined with a rectangle (assume a circle has label on the right for example)

[@bhasim4299]

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

[@sherifsalah5563]

Can you please do collision avoidance? I don’t wanna rectangles overlap each others on mouse movement.

[@ramlaaal]

condition for collision is too lengthy we could use this instead.
Math.abs(mouse.x - (canvas.width/2 - 50))

[@kylemorely1812]

how could you detect the collision of more than two rectangles

[@x_way4539]

Well 👍🏽

[@anmolbakshi7983]

suuuperb

[@Fouzia60]

Plz give a link of source code

[@D4rkJvck]

Why not using object.right, .left, .top, .bottom?

[@muhammadraabit3158]

Canvas image Interaction Events . how to Change Product image color with color pallet

[@behnamparsaeifard3883]

What if two rectangles are rotated, let’s say with two different angles a1 and a2?

[@onepieceworld121]

It works with the same code . Just need some updates

[@elliot_yoyo]

nice

[@ChrisCourses]

Thanks Elliot 🙌

[@archicoders9620]

Polygon Collision Detection please

[@willmil1199]

If you need help in your code, you'll find what you need at: 2:00

[@bhasim4299]

why do you only have 90 k subs????

[@funnylifestyle8174]

Lit video...

[@ChrisCourses]

Lit comment, thank you!

[@jdd1325]

Love the tutorial. Top notch production value and great tips.
P.S. You are so freakin cute 😍😉😁. Whoever is in your life is a lucky woman/man/person

[@ChrisCourses]

Haha thank you, appreciate the compliment! I'd say I'm pretty lucky to have my girlfriend 😉

[@gameplaysongs360]

How to learn javascript game developement

[@kaissoune]

Wow, as pretty as an amazing tutorial. praise be to God

[@ChrisCourses]

Thank you Kaissoune, always appreciate the support 🙏

[@mynameisreza1]

I was having so much trouble understanding this until I realized that the coordinates start in the corner ugh

[@Pawlo370]

And now think about making game with thousands collisions