Collision Detection in Javascript
Collision detection also known as hit testing is one of the most commonly and widely used terminology in web development to detect or sense tow hitting or colliding objects on screen. It is a broad topic and there is no single technique or theorem to include or render all types of collisions. The term collision detection is widely used in game programming, whereas hit testing is a terminology used in UI programming.
Remember the famous Mario or Castlevania game?!?!! The animated characters scroll on the screen and they pick up the items or they walk on the platform, jump and escape from the enemy.What must be happening behind the scenes?! Some event is triggered as a result of hitting or colliding of one object with another object on the screen. I have wondered, what is going on, under the hood, when I was a kid. While playing games those days , I never knew something called game development exists. The science behind that trigger is based on the Collision detection. Formulating the events and after effects of colliding objects play behind the scenes of such games. Sometimes this colliding not only implies when two objects on the screen collide, but also when an onscreen object collides with the edges or walls (like boundaries on the game window). And sometimes both the objects would be moving or one of them would be static and the other one would be a moving object.
There are some algorithms to detect collision in 2D games depending on the type of shapes that can collide (e.g. Rectangle to Rectangle, Rectangle to Circle, Circle to Circle). If the shape is not regular, then an entity like a rectangular box is considered as a hit box and the algorithm for rectangle to rectangle can be applied in such cases. Let us see an overview of the algorithms for all the three cases. I am going to walk through the steps that my team (Mark Pothecary , Cory Harper) and I used when we were working on a classroom project - 2D- side scroller game using pure Javascript. I had spent most of the time on Collision detection, which is the part that I was responsible for. It took almost two days for me integrate my file ‘Collision.js’ with the file that had the canvas. The reason for that long time was because that the canvas coordinates were not conventional. Getting to the point, here are the general collision detection techniques followed in two dimensional game development and the one which which I used, in our game.
Collision detection theorems :
1. Axis Aligned Bounding Box (detects collision between two rectangles)
2. Separating Axis theorem (detects collision between two convex polygons)
3.Circle Collision( technique that detects collision between two circles)
Axis-Aligned Bounding Box(AABB):
This is the one that I used in our app. When objects are moving on the same plane without any rotation, then they are said to be axis-aligned. This algorithm is applied when two rectangular objects are colliding while they are axis aligned (no rotation). This algorithm is based on the gap between the moving objects. If there is a gap between the objects, then they are considered to be non-colliding, otherwise (no gap between the four sides of a rectangle) collision is said to occur. This is one of the simplest collision detection in game programming, since the rectangles are axis aligned. I used this technique to detect collision in our game because it was a 2D side scroller game with animated objects (of irregular geometry) moving across the screen.
If all of following are true than our first rectangle (A) is colliding with our second rectangle (B).
- A.X < B.X + B.Width
- A.X + A.Width > B.X
- A.Y < B.Y + B.Height
- A.Y + A.Height > B.Y
In the playableCharacter.js , I had let the character to save its position in an array, which was initialized as one of its properties in the class constructor. And rendered an update statement for that array in each and every movement function invoked inside of another function where we defined the event Listeners to make object move according to the user’s input. We had a class called staticObject which had two subclasses called the platform and items . If the object is an item, the characters health and points were calculated depending which item did it pick. If you notice the conditional statement, the conditions are slightly modified in accordance with the canvas’ coordinates. To incorporate the coordinates with the algorithm steps was a little tricky.
Canvas Coordinate System:
Let’s take a look at the canvas basics used in game programming. The canvas is a grid of pixels. When we use the canvas to draw 2d pictures, each pixel has a x and a y location that describes where it is on the canvas.
And finally, I could derive the conditions based on the canvas coordinate system , which has an inversing y axis to that of the conventional x-y coordinate system. The function shown in the code block above detects the collision perfectly as expected.
if(((pleft < pcright) && (pright > pcleft) && (pbottom > pctop) && (ptop < pcbottom)))
{
collision = true;
}I have used pcleft, pcright, pctop, pctop to represent the bounding box of the playable character. And pleft, pright, ptop, pbottom to represent the bounding box of the object. When called on an item (instance of Item class), it checks for the charcater’s collision with the item . When called on a platform, it checks for the character’s collision with the platform.
And finally, the collisionTestMethod was called on all of the platforms and all of the items generated so as to check for collision of the playableCharacter with all of the platforms and all of the items which were generated randomly on the canvas with the animation frame scrolling. This is done to check for collision with all if the platforms and all of the items appearing on the screen.
Working on collision detection was a real exploration. Once the techniques are known, it is so easy to detect the collision. Happy Game Coding!
References:
