Collision Detection Between Rectangles in JavaScript

Подписаться 82 тыс.

Просмотров 31 тыс.

50% 1

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 • Sprite Animation in Ja...
🐶 Project 2: Parallax backgrounds • Parallax in JavaScript...
🐶 Project 3: NPC movement • How To Code Flying Cre...
🐶 Project 4: ** this video **
🐶 Project 5: Circle collision • Collision Detection Be...
🐶 Project 6: Triggered event based animations • Audio Visual Effects i...
🐶 Project 7: Raven game • JavaScript Shooter Gam...
🐶 Project 8: Enemy types • How To Code Creatures ...
🐶 Project 9: State Management • State Management in Games
🐶 Project 10: Easy Side-Scroller Game • JavaScript Side Scroll...
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: • JavaScript Game Tutori...
Frogger: • Learn JavaScript By Bu...
Flappy bird: • JavaScript Flappy Bird...
🎮 More HTML5 canvas and JavaScript game tutorials:
• Game Development with ...
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:
• Front End Web Developm...
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
• Creative Coding with V...
Let's be friends
👍 You can message me on TWITTER / code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (RU-vid 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

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 159

@Frankslaboratory 3 года назад

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

@unknown-bx8my 3 года назад

Yes,check out my new project: aboudaccoumeh.github.io/bb/index.html

@Xyzzzz307 3 года назад

My first game was In html divs. I was just a dummy of chrome dino

@Frankslaboratory 3 года назад

@@unknown-bx8my Nice work. I inspected your code. You are using function constructor rather that JavaScript class for your player and obstacle, interesting.

@Frankslaboratory 3 года назад

@@Xyzzzz307 Awesome, I love Chrome dino, the game with dog I show in this video is basically chrome dinosaur game as well, but I added a lot of extra features and graphics

@agent-33 3 года назад

Still learning and testing small features like auto-scale canvas while keeping aspect ratio, detailed loading bar/progress, import & export, touchscreen controls, and modal window similar to custom alert. I'm still not finished practicing modal window, I can do simple modal window but my goal is to make it dynamically generated and can be stacked meaning there could be another window showing at front of previous window. I got tired and lazy so I took a break from coding. 😅

@devsauce 3 года назад

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

@Frankslaboratory 3 года назад

I'm trying to cover all the basics so we can build a lot of different games with it, thanks for a nice comment ❤

@Mainman0011 2 года назад

Thanks to Franks Laboratory I made a simple tilemap editor for my tower defense game which also used the base code structure of his tutorials too :)

@markwillis1045 3 года назад

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.

@Frankslaboratory 3 года назад

Hi Mark, yeah I thought this was a good opportunity to show them together as I use one of these randomly and people sometimes tell me they are confused. I should have also shown how to wrap them in reusable function where you pass first and second object to compare. Next time :D thank you for taking the time to give me your feedback

@ShayanBinShad 3 года назад

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

@Frankslaboratory 3 года назад

Hi Shadow, glad I can help, thank you for your feedback :)

@zakhariihusar6975 2 года назад

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

@Frankslaboratory 2 года назад

Zakharii! thank you, nice to hear feedback like that

@sidheshwartiwari9834 3 года назад

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

@Frankslaboratory 3 года назад

Thank you Sid, always nice to see you here ♥

@Web-Dev-Codi 3 года назад

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.

@Frankslaboratory 3 года назад

Hi Brian, thank you, thant's a great feedback. I'm trying to cover all the small bits necessary to make games, hopefully it will allow me to make more complex games as tutorials in the future, when I don't have to explain all these basics

@CoolScratcher 3 года назад

well, frank's officially a genius.

@Frankslaboratory 3 года назад

Hi CS, thanks man, I'm just a student like all of us :D

@Xyzzzz307 3 года назад

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

@Frankslaboratory 3 года назад

Thank you, good to hear that my visuals worked :D

@Xyzzzz307 3 года назад

@@Frankslaboratory 😊

@wearyroom2333 2 года назад

yessss that was like best description ever

@DanielHookinsAU 2 года назад

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

@Frankslaboratory 2 года назад

Hi Daniel, thank you, I appreciate this feedback. I will try to use more visualizations like this since it seems to help

@ROLOGamingOfficial 2 года назад

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

@Frankslaboratory 2 года назад

Thank you. Glad to see this feedback

@shanksrp 2 года назад

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

@Frankslaboratory 2 года назад

Glad it was helpful, I use this collision formula a lot, it's simple and effective

@evaristocuesta 3 года назад

Great explanation!

@Frankslaboratory 3 года назад

Thank you Evaristo ❤

@gama8311 2 года назад

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

@joel-tw7hk 3 года назад

Thanks,Very helpful.

@Frankslaboratory 3 года назад

Thanks Joel

@rajesht9702 3 года назад

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

@Frankslaboratory 3 года назад

Hi Rajesh, it's a useful technique, I use it in many games and animations. glad you liked it

@JetLee1544 3 года назад

Thanks a lot

@Frankslaboratory 3 года назад

Most welcome Jet

@cafelutsa_ 2 года назад

works great! thank you

@Frankslaboratory 2 года назад

Glad to hear Vlad

@borisbarzotto5785 3 года назад

Good explained!

@Frankslaboratory 3 года назад

Hi Boris, thank you :)

@merdanozdogan5296 Год назад

Thank you sooooo much

@emrekayik 3 года назад

Thank you bro.

@Frankslaboratory 3 года назад

Hi Emre, happy to help :)

@deepakbhargav7434 3 года назад

Thank you, ur explanation is wowwww

@Frankslaboratory 3 года назад

Deepak! Thank you for your feedback I appreciate it

@studioprojects Год назад

great work, thanks :)

@Frankslaboratory Год назад

I'm here to help

@stf8375 3 года назад

Thanks you very simple and good explication

@Frankslaboratory 3 года назад

Glad it helped

@piersonlippard2911 3 года назад

Thanks for this great collision detection tutorial Frank

@Frankslaboratory 3 года назад

Pierson! Thank you :D I'm hoping to cover all the small bits of gamedev so we can build a lot of games later

@piersonlippard2911 3 года назад

@@Frankslaboratory That's great news thanks Frank, I'm really looking forward to coding along with all your game tuts.

@Frankslaboratory 3 года назад

@@piersonlippard2911Thank you Pierson. I've been doing a lot of gamedev lately, I hope people like it :D

@yaverjavid 3 года назад

Thanks

@Frankslaboratory 3 года назад

My pleasure Yaver

@nagesh007 Год назад

Awesome 😍

@storieswithatharv9214 3 года назад

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

@Frankslaboratory 3 года назад

Hi Atharv, I did circle collision for example in my fish game video. It's different than this, it uses Pythagorean theorem to calculate distance between two points and then you compare that distace to radius of circle 1 + 2. I will make a quick video on that as well

@storieswithatharv9214 3 года назад

@@Frankslaboratory thanks sir, i will try by following that tutorial

@dashawk 3 года назад

I am stuck with collision on my gatcha game, this is going to help me a lot.

@Frankslaboratory 3 года назад

HI Dashawk, awesome, good luck with your game, I'm also making a quick video on circle collision detection

@aravindvv2276 3 года назад

Awesome 🥳🥳

@Frankslaboratory 3 года назад

Thank you Aravind 🍀

@unknown-bx8my 3 года назад

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

@Frankslaboratory 3 года назад

Hi Abed, thank you, Separating axis theorem is important for physics games, like angry birds, when you want broken building to fall properly. I will do a video on that later.

@Xyzzzz307 3 года назад

I also have vanilla javascript videos Channel name is KDev's

@unknown-bx8my 3 года назад

@@Frankslaboratory yes pleasee😍😍

@unknown-bx8my 3 года назад

@@Xyzzzz307 i will ckeck your videos👍

@unknown-bx8my 3 года назад

@@Xyzzzz307 your channel does not have any content.

@nickmartinez5455 2 года назад

I wanted to say, thank you for this video. It's been very helpful. I am running into issues; I am able to detect impassable walls (rectangles) using this algorithm; however, preventing the player from passing through the walls is eluding me. If I could detect which side of the rectangle has collided with the other, I could overcome the issue. However; that is the piece I've yet to figture out. Anyone reading this have any ideas?

@juanfranciscorodriguez7785 15 дней назад

thank you so much, this was really helpfull 😁😁❤❤

@Frankslaboratory 11 дней назад

Hi Juan, glad you found some value ❤

@manjunathr8580 3 года назад

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..😍😍

@Frankslaboratory 3 года назад

Manjunath! Nice to meet you. It makes me happy to read feedback like this. Thank you. I wish you all the best in your future coding career

@marcinkalmar9964 2 года назад

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

@javifontalva7752 Год назад

Eparsting axis theorem. Do you have a video on that? Maybe a video talking about different kind of collision and how to solve this wpuld be a good idea.

@Frankslaboratory Год назад

I haven't covered more advanced collision detection techniques. Only circle rectangle and color collisions. Will do more advanced ones probably as a part of some physic engine priject

@Cod3rMax 7 месяцев назад

Can you please make a tutorial how to detect collision between lines

@brijeshpydev 3 года назад

AWESOME 🥰🥰🥰 JS COLLISION 🥰🥰🥰🥰

@Frankslaboratory 3 года назад

Thank you :)

@greenguydubstep 2 года назад

i think i learn something!

@aaronrothwell7615 3 года назад

What is the reason for using OR logic, rather than AND logic, which would short-circuit if the first evaluation was false and thus save on calculations?

@Frankslaboratory 3 года назад

OR operator will know that collision is not happening faster because it needs only one statement to be true in this algorithm. It doesn't have to evaluate all 4 statements the way && operator does. However it needs to run all 4 checks to know when collision is happening. I think OR operator is more performant in this case but my stress test didn't show much difference. Still I wanted to show both versions here

@awdrifter3394 3 года назад

Now I want to make pong in JavaScript.

@Frankslaboratory 3 года назад

Good idea, I will make a tutorial on pong or brick breaker

@awdrifter3394 3 года назад

@@Frankslaboratory that would be cool.

@1peck775 3 года назад

Perfect collision overlap explanation. On a side note I always found dealing with input can be tricky using JS + canvas. Key is just pressed, Key is being hold, Key have been released, etc... maybe an idea for a futur video? :p (or maybe I m just blind and you already did it ^^).

@Frankslaboratory 3 года назад

Hi Peck, I recently found a good way how to do keyboard controls in an easy modular way by creating input handler class, I will make a video on keyboard and maybe even touch controls, great idea, thank you

@quietnix 3 года назад

@@Frankslaboratory that will be great.

@jakeshepperd483 3 года назад

So which is better - the first one or the second?

@Frankslaboratory 3 года назад

Hi Jake. The second one is better to use I think. I did a stress test and I couldn't see a difference though so the difference is not massive.

@jakeshepperd483 3 года назад

@@Frankslaboratory Thanks :)

@marquezhernandezisaac7800 2 года назад

Amazing, how could this work if one of the rectangles is rotating?

@Frankslaboratory 2 года назад

Hi. This works only for non rotated rectangles. If one or both rectangles are rotated you need to use 'separating axis theorem' to detect if they collide.

@marquezhernandezisaac7800 2 года назад

@@Frankslaboratory tysm!

@jubrazkhan255 3 года назад

How to create canvas 2d animation Stream Recorder(video mp4 format recording)

@Frankslaboratory 3 года назад

I will respond on your other comment

@jubrazkhan255 3 года назад

How to canvas animation stream recording using javascript function captureStream and MediaRecorder API sir please help me

@Frankslaboratory 3 года назад

Hi, there is documentation on this, but it might be hard to follow. I might do a video about this when I'm done with my current gamedev series. It's a good idea, thank you

@jubrazkhan255 3 года назад

@@Frankslaboratory i am waiting

@worldsgamesguider7283 3 года назад

hello Sir I Have Question About Canva Animation

@Frankslaboratory 3 года назад

Hi. What question do you have. There is a bug on RU-vid sometimes it automatically deletes comments with links. I can't retrieve it. You can message me on Twitter also

@worldsgamesguider7283 3 года назад

@@Frankslaboratory OK Sir

@drkmgoswami3042 3 года назад

This can be seen at Mozilla Firefox documentation Please tell how to do collision between rectangle and circle . Circle and circle How won't video give like To this comment Target 20 likes

@Frankslaboratory 3 года назад

You are right, MDN docs cover a lot when it comes to gamedev, I don't think they cover the second algorithm I show in this video, but they are a good guideline. I might make videos inspired by some of their other articles. Yes circle and circle is next, rectangle and circle will be part of larger series I will do as a collab with a friend.

@atphanvan6042 3 года назад

can you make 3D game like racing car please

@Frankslaboratory 3 года назад

Good idea, will put it on my list

@nil8659 3 года назад

requires a different version of the html5 canvas but it could be possible

@Xyzzzz307 3 года назад

Hi Sir. Do you have time? I want to have your interview

@Frankslaboratory 3 года назад

Hi Shobha, we can have a video call about this sometimes and plan it

@Xyzzzz307 3 года назад

@@Frankslaboratory I am ready as always 😃

@Xyzzzz307 3 года назад

@@Frankslaboratory Just tell the time, and you will get me there

@Xyzzzz307 3 года назад

@@Frankslaboratory When? 🙃

@unknown-bx8my 3 года назад

I have not twitter account☹.

@Frankslaboratory 3 года назад

Sometimes life is better without Twitter :D

@Xyzzzz307 3 года назад

Thats life. Sometimes sweet, sometimes no twitter account 😔

@unknown-bx8my 3 года назад

@@Frankslaboratory its absolutely better. But its not better when you say: "you can chat me using twitter". And i have not☹.

@Frankslaboratory 3 года назад

@@unknown-bx8my We can also chat in comments here it's fine :D Sometimes it's better like this on my new video because sometimes I miss comments on older stuff. Twitter takes a lot of my time, so it's good that you don't have it, and can do more important things in life :D

@unknown-bx8my 3 года назад

@@Frankslaboratory 👍☺😍

@codeart6332 2 года назад

thanks Frank for this video i think I'm the only one who can't understand this hhhh

@Frankslaboratory 2 года назад

Some of these concepts are hard to visualise, what helps me is to read/watch explanations from multiple people, eventually it starts making sense to me

@codeart6332 2 года назад

@@Frankslaboratory So it's normal, I didn't understand it the first time ?

@Frankslaboratory 2 года назад

Yes. Don't worry :)

@user-wi4nn7il9v 3 года назад

First! Hhhh

@Frankslaboratory 3 года назад

You win this week :D

@Xyzzzz307 3 года назад

Congratulations!! 🎉🎉🎉😄😄😄

@JUNGELMAN2012 Год назад

1- The video does not show the rectangles the numbers represent in line 1. They represent 2 rectangles with 1 smaller inside the other. 2- at 3:22 in test 3 you don't check if is above, as you say in the video, but actually, if the total is below. The real number given causes 4 fails: var rect1 = {x: 5, y: 5, width: 50, height: 50}; var rect2 = {x: 20, y: 10, width: 10, height: 10}; Assuming similar number as the red and blue squares on a canvas of 2000x2000: var rect1 = {x: 380, y: 170, width: 100, height: 100}; var rect2 = {x: 500, y: 100, width: 200, height: 100}; we get FAIL PASS FAIL FAIL confusing part in the video.