Collision Detection Between Rectangles in JavaScript

collision detection is important if you want to build the javascript games and you need to detect when two elements collide or when you are building particle systems where objects interact with each other or maybe you want your canvas animations to interact with regular website elements for most projects all we need is simple collision detection algorithm between two rectangles or between two circles for more complex shapes we 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 you might also have more specific needs for your games or creative coding projects some of other common scenarios are collision detection between point and circle point and square between line and circle line and square between two lines and so on it becomes more complex when you need to detect collisions where shapes such as convex and concave polygons are involved there are some clever tricks people came up with to handle these more advanced scenarios such as detecting collision by color or projecting lines from a point and checking if the number of intersections between that line and polygon is odd or even a number with more complex shapes it's a good practice to wrap them in simple rectangles and only run advanced collision checks if these rectangles collide and we know that the shapes are close enough and collision is possible for many games all you need is to create a generic shape around our objects so called hitbox even though the collision is not pixel perfect we can adjust these hitboxes to roughly match collision areas of objects with different shapes main advantage is that the code is very simple and performant because it doesn't require complex calculations to determine whether two objects collide or not these hitboxes can have shape or rectangle circle or polygon the simplest collision detection algorithm is between two rectangles that are axis aligned it means that they are not rotated it simply compares x and y coordinates and width and height of these two rectangles if they overlap we get collision if there is a gap between them we know there is no collision let me show you two different simple algorithms you can use to detect collision between two rectangles two hitboxes in our games let's say we have rectangle one and rectangle two both of these objects have x and y coordinates and some width and height the first way i can check if they collide is this i create a simple if statement and i check if horizontal position x of rectangle 1 is less than horizontal position x of rectangle 2 plus width of rectangle 2. basically if this point is less than this point less means if it's to the left on horizontal x-axis at the same time we want to check if x of rectangle 1 plus width of rectangle 1 is more than x of rectangle 2 that means if this point is to the right from this point we also do this vertically so we check if vertical y coordinate of rectangle 1 is less than vertical y of rectangle 2 plus height of rectangle 2 if this point is above this point and lastly we check if vertical coordinate of rectangle 1 plus height of rectangle 1 is more than horizontal y position of rectangle 2. if this point is below this point if all of these 4 conditions are true we enter this code block in our if statement and collision is triggered else we know there is no collision we can also flip the logic completely this second algorithm does the same checks but it's a bit more efficient if i change the logic a little bit and use or operator it returns true if at least one of its operands are true let's go through the logic here if x of rectangle 1 is more than x of rectangle 2 plus width of rectangle 2 we know they cannot possibly collide so this will return true and we know straight away there is no collision also if x of rectangle one plus width of rectangle one is less than x of rectangle two again we know these rectangles can't possibly collide just one check and we know there is no collision if y of rectangle 1 is more than y of rectangle 2 plus height of rectangle 2 there is no way for collision to happen if y of rectangle 1 plus its height is less than y of rectangle 2 we also know they don't collide so if at least one of these 4 checks is true we know there is no collision if all four return false we know that the rectangles must collide else statement is entered and collision is detected i hope this was visual enough and you got some clarity on how these checks work if you have any questions let me know if you want to see how to implement these particular algorithms in an actual project and where exactly to place them in your code base i use them in many of my games such as in tower defense frogger flappy bird and many more i will link some in the video description if you want to learn more with me check out some videos on my vanilla javascript game development playlist i also do web animations generative art for beginners and more everything with vanilla javascript using no frameworks and no libraries hope you have fun and show me some of your creative coding projects please you can message me on twitter if you want let's be friends

Channel: Franks laboratory

Views: 17,908

Keywords: Collision detection, collision detection javascript, 2d collision detection, collision detection between rectangles, collision detection between rectangles in javascript, javascript game, javascript tutorial, how to detect collision, how to detect collision in javascript, game development, game development for beginners, javascript game tutorial, web development, webdev, front end web developer, franks laboratory, frankslaboratory

Id: r0sy-Cr6WHY

Length: 5min 52sec (352 seconds)

Published: Fri Jun 04 2021

Reddit Comments

[u/IAmRules]

Great example of how code optimization works too, I wouldn't have given the && operator second thought until you mentioned it

[u/baretumpaz]

Frank! thank youuu.

[u/gniziemazity]

Great visual explanations!