Collision Implementation

share link

by Abdul Rawoof A R dot icon Updated: Mar 2, 2023

technology logo
technology logo

Guide Kit Guide Kit  

In JavaScript, collision is the overlap of elements that can be called collision detection. This is a standard part of most games when moving page elements to detect the position and then calculate if they overlap. 


To find the collision between the two objects in JavaScript, we can detect those collisions by using bounding boxes of objects, and those bounding boxes are of type THREE. Box3 and have useful methods such as isIntersectionBox, containBox, or constainsPoint, which will suit all our needs and requirements when we want to detect collisions. To check for collisions, if both the horizontal and vertical edges overlap, then we have a collision. We check when the right side of the first object is higher than the left side of the second object, and when the second object's right side is higher than the first object's left side, then it is like the vertical axis. We have two forms of collision detection in JavaScript. They are, 

  • Continuous: it is expensive and stimulates solid objects in real life. 
  • Discrete: in this, objects will end up penetrating each other. 


Here is an example of how to implement collision: