Collision Detection Logic

Imagine you are walking through a busy hallway and must avoid bumping into other students. You constantly track their positions relative to yours to ensure you maintain your own personal space. Games work exactly the same way because every moving character needs to know if they occupy the same space as another object. Without this logic, your player character would simply pass through walls or enemies like a ghost. Building a solid game requires you to stop these objects from overlapping by checking their positions during every single frame of the game loop.

Understanding Axis Aligned Bounding Boxes

When we represent game characters as rectangles, we use a concept called Axis Aligned Bounding Box detection. This method assumes that your rectangles do not rotate and always stay aligned with the screen grid. You can imagine this like checking if two parking spots overlap in a crowded lot. If the left side of one box is past the right side of another, they are not touching. We compare the four edges of each shape to see if they cross each other at any point. By checking these edges against each other, the computer can tell if two items share the same pixel coordinates.

Key term: Axis Aligned Bounding Box — a simple rectangular boundary used to calculate if two non-rotating objects overlap on a screen.

To perform this check, you must compare the horizontal and vertical positions of both rectangles. You look at the left, right, top, and bottom edges of the player and the target object. If the player's right edge is further than the target's left edge, you know they might be touching. You then confirm this by checking the other three sides in the same exact way. If all four conditions are met at once, the computer triggers a collision event. This process happens many times per second to ensure the game feels smooth and responsive to the user.

Implementing Detection Logic In Code

Writing this logic requires a function that takes two objects and returns a true or false value. You can see how this works in the following example which checks for an intersection between two rectangles.

function isColliding(rect1, rect2) {
  return rect1.x  rect2.x &&
         rect1.y  rect2.y;
}

This function compares the boundaries of two objects to see if they occupy the same space. The logic relies on four simple comparisons that verify if the shapes overlap on both the horizontal and vertical axes. If any one of these conditions is false, the objects are not touching, and the function returns false. This small block of code acts as the gatekeeper for your game interactions. It prevents your player from moving through solid walls or passing through items they should collect.

Boundary Side	Comparison Logic	Purpose of Check
Left/Right	rect1.x vs rect2.x	Checks horizontal overlap
Top/Bottom	rect1.y vs rect2.y	Checks vertical overlap
Width/Height	rect1.w vs rect2.w	Defines the boundary size

Using this table, you can see how we map the edges of our shapes to logical comparisons. Each row represents a specific part of the math required to detect a collision between two entities. By keeping the logic simple and focused on these four edges, you ensure the game runs quickly even with many objects. This method is the standard for most simple 2D games because it is easy to read and very fast for the computer to calculate. If you ever need to add more complex shapes, you would simply add more logic to handle the rotation or irregular edges.

---

Collision detection works by comparing the four edges of two rectangular objects to determine if they occupy the same screen coordinates.

But what does it look like in practice when we need to handle the player's movement based on these collisions?