Collision Detection Between Rectangles in JavaScript

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

[@unknown-bx8my]

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

[@Xyzzzz307]

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

[@Frankslaboratory]

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

[@Frankslaboratory]

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

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]

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

[@Frankslaboratory]

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]

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]

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]

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]

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

[@Frankslaboratory]

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

[@zakhariihusar6975]

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

[@Frankslaboratory]

Zakharii! thank you, nice to hear feedback like that

[@Xyzzzz307]

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

[@Frankslaboratory]

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

[@Xyzzzz307]

@@Frankslaboratory 😊

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

[@Frankslaboratory]

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

[@sidheshwartiwari9834]

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

[@Frankslaboratory]

Thank you Sid, always nice to see you here ♥

[@wearyroom2333]

yessss that was like best description ever

[@CoolScratcher]

well, frank's officially a genius.

[@Frankslaboratory]

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

[@DanielHookinsAU]

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

[@Frankslaboratory]

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

[@piersonlippard2911]

Thanks for this great collision detection tutorial Frank

[@Frankslaboratory]

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]

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

[@Frankslaboratory]

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

[@unknown-bx8my]

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

[@Frankslaboratory]

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]

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

[@unknown-bx8my]

@@Frankslaboratory yes pleasee😍😍

[@unknown-bx8my]

@@Xyzzzz307 i will ckeck your videos👍

[@unknown-bx8my]

@@Xyzzzz307 your channel does not have any content.

[@evaristocuesta]

Great explanation!

[@Frankslaboratory]

Thank you Evaristo ❤

[@ROLOGamingOfficial]

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

[@Frankslaboratory]

Thank you. Glad to see this feedback

[@manjunathr8580]

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]

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

[@shanksrp]

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

[@Frankslaboratory]

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

[@stf8375]

Thanks you very simple and good explication

[@Frankslaboratory]

Glad it helped

[@storieswithatharv9214]

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

[@Frankslaboratory]

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]

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

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

[@aaronrothwell7615]

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]

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

[@gama8311]

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

[@joel-tw7hk]

Thanks,Very helpful.

[@Frankslaboratory]

Thanks Joel

[@borisbarzotto5785]

Good explained!

[@Frankslaboratory]

Hi Boris, thank you :)

[@marcinkalmar9964]

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

[@rajesht9702]

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

[@Frankslaboratory]

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

[@dashawk]

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

[@Frankslaboratory]

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

[@nickmartinez5455]

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]

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

[@Frankslaboratory]

Hi Juan, glad you found some value ❤

[@deepakbhargav7434]

Thank you, ur explanation is wowwww

[@Frankslaboratory]

Deepak! Thank you for your feedback I appreciate it

[@Cod3rMax]

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

[@JetLee1544]

Thanks a lot

[@Frankslaboratory]

Most welcome Jet

[@1_peck]

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]

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]

@@Frankslaboratory that will be great.

[@emrekayik]

Thank you bro.

[@Frankslaboratory]

Hi Emre, happy to help :)

[@aravindvv2276]

Awesome 🥳🥳

[@Frankslaboratory]

Thank you Aravind 🍀

[@cafelutsa_]

works great! thank you

[@Frankslaboratory]

Glad to hear Vlad

[@jakeshepperd483]

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

[@Frankslaboratory]

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]

@@Frankslaboratory Thanks :)

[@studioprojects]

great work, thanks :)

[@Frankslaboratory]

I'm here to help

[@awdrifter3394]

Now I want to make pong in JavaScript.

[@Frankslaboratory]

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

[@awdrifter3394]

@@Frankslaboratory that would be cool.

[@merdanozdogan5296]

Thank you sooooo much

[@marquezhernandezisaac7800]

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

[@Frankslaboratory]

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]

@@Frankslaboratory tysm!

[@nagesh007]

Awesome 😍

[@yaverjavid]

Thanks

[@Frankslaboratory]

My pleasure Yaver

[@brijeshpydev]

AWESOME 🥰🥰🥰 JS COLLISION 🥰🥰🥰🥰

[@Frankslaboratory]

Thank you :)

[@greenguydubstep]

i think i learn something!

[@worldsgamesguider7283]

hello Sir I Have Question About Canva Animation

[@Frankslaboratory]

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

[@worldsgamesguider7283]

@@Frankslaboratory OK Sir

[@jubrazkhan255]

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

[@Frankslaboratory]

I will respond on your other comment

[@jubrazkhan255]

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

[@Frankslaboratory]

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]

@@Frankslaboratory i am waiting

[@atphanvan6042]

can you make 3D game like racing car please

[@Frankslaboratory]

Good idea, will put it on my list

[@nil8659]

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

[@Xyzzzz307]

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

[@Frankslaboratory]

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

[@Xyzzzz307]

@@Frankslaboratory I am ready as always 😃

[@Xyzzzz307]

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

[@Xyzzzz307]

@@Frankslaboratory When? 🙃

[@unknown-bx8my]

I have not twitter account☹.

[@Frankslaboratory]

Sometimes life is better without Twitter :D

[@Xyzzzz307]

Thats life. Sometimes sweet, sometimes no twitter account 😔

[@unknown-bx8my]

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

[@Frankslaboratory]

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

@@Frankslaboratory 👍☺😍

[@drkmgoswami3042]

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]

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.

[@codeart6332]

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

[@Frankslaboratory]

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]

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

[@Frankslaboratory]

Yes. Don't worry :)

[@user-wi4nn7il9v]

First! Hhhh

[@Frankslaboratory]

You win this week :D

[@Xyzzzz307]

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.

[@rezwansaki]

Thanks

[@Frankslaboratory]

Happy to help Md.