Uploaded June 2021 | Updated September 2026, 2 weeks ago

---

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 1: Sprite animation youtu.be/CY0HE277IBM
🐶 Project 2: Parallax backgrounds youtu.be/Mg7ibYWhjPI
🐶 Project 3: NPC movement youtu.be/pyhb8Y9qKUI
🐶 Project 4: *** this video ***
🐶 Project 5: Circle collision youtu.be/rtBCVe3j_24
🐶 Project 6: Triggered event based animations youtu.be/Eg_zUEy_lDE
🐶 Project 7: Raven game youtu.be/gCa0z4B-CRo
🐶 Project 8: Enemy types youtu.be/aEDADLtLEbk
🐶 Project 9: State Management youtu.be/jKe44NeFzwE
🐶 Project 10: Easy Side-Scroller Game youtu.be/7JtLHJbm0kA


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 🔥
☕ How to Program Games: Tile Classics in JS for HTML5 Canvas bit.ly/2ZUfKuG
☕ Learn Professional 2D Game Graphic Design in Photoshop bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game bit.ly/3nUrTKm
Get Adobe creative suite apps (Photoshop, Illustrator etc.) bit.ly/3e60cI0

❤ Related Links ❤
Art by bevouliin.com
You can practice techniques we learned to day in these vanilla JavaScript game tutorials:
Tower Defense: youtu.be/QxYg8-mhhhs
Frogger: youtu.be/GXvNEwu9cgM
Flappy bird: youtu.be/lGJ9i6CYKyQ


🎮 More HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu

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:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-

If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh

Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory

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