Collision Detection Between Rectangles in JavaScript

Let me show you some awesome projects that use collision detection, we will learn what types of collision detection algorithms are out there, rate them by difficulty and then we deep dive into 2 simple algorithms for collision detection between rectangles in JavaScript. Even beginners can build JavaScript games, it might be easier than you think!

⭐️TABLE OF CONTENT ⭐️
00:00 Why do we need collision detection
00:42 Types of 2D collision detection
01:59 How to detect collision between 2 rectangles
03:44 Collision between two rectangles - algorithm 2

🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 4: *** this video ***

For most projects all we need is simple collision detection algorithm between two rectangles or between two circles. For more complex shapes, we can also use collision detection technique called separating axis theorem. It can be used to detect collision between convex polygons or rectangles that are rotated and aren't axis aligned.

🔥 I really like these GAMEDEV and GAME ART courses on Udemy 🔥

❤ Related Links ❤
You can practice techniques we learned to day in these vanilla JavaScript game tutorials:

🎮 More HTML5 canvas and JavaScript game tutorials:

If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:

If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:

Let's be friends

Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[Frankslaboratory]

Hi coders, have you built a JavaScript game yet or are you still gathering information before your first project? What game did you build?

[devsauce]

If you keep going at this rate, we can have a full game engine made out of your tutorials 😄

[ShayanBinShad]

This is what I wanted for my assignment. Thank you, Frank for the tutorial and explanation! :)

[markwillis]

What a great video. I appreciated that you show these algorithms side by side, I think it really highlights the second algorithm will be far less expensive, so thanks for going through both ways so clearly.

[zakhariihusar]

I love when people break complex things on simple parts. Great video 👍

[Xyzzzz]

The explanation came out to be extraordinary. Especially the animations on screen

[sidheshwartiwari]

Great tutorial yet again. Every one needs to share this 🙏🏻. Thank you so much Frank, this one is right on time 😊.

[Web-Dev-Codi]

Another great JavaScript video. The way you explain the syntax needed really helps me understand what you are doing and why. Thank You for creating such amazing content.

[wearyroom]

yessss that was like best description ever

[CoolScratcher]

well, frank's officially a genius.

[unknown-bxmy]

Thank you. This tutoriol is very useful for game developers.
I am very interesting about seperating axis theorem.
Keep making videos.🔥🔥

[piersonlippard]

Thanks for this great collision detection tutorial Frank

[DanielHookinsAU]

Thanks for the video Frank. The visualisation made it really clear!

[storieswithatharv]

thankyou sir,
i understood it well in flappybird tutorial video
now i will try cirlces with similar logic

[ROLOGamingOfficial]

Totally Saving this one awesome!
Simple and very easy to understand.

[shanksrp]

amazing video, I finally managed to make collisions for my game, thanks 🇧🇷

[manjunathr]

I'm trying to subscribe twice, but unfortunately I can only subscribe once.. Please don't stop posting such videos and don't delete any of these videos.. I can see my bright career in ur videos..😍😍

[gama]

Thank you very much for sharing this information, it is really helpful ❤💥

[marcinkalmar]

Please make video about collision between circle and rectangle I can't clearly understand how it's work, thanks

[rajesht]

Thanks for making another useful video. It is similar to what I thought.