Determining Collisions

Box to Box Collision

The next part of our project is stopping the game whenever the obstacle touches the player. But how does the computer know when the two are touching? We can tell with our eyes that these two boxes below are touching.

The computer has no eyes, so how can we tell with code whether these two boxes are touching? For that, we need to know the x position, y position, width, and height of each box. Here, that will be denoted as x, y, w, h and x, y, w, h.

Blue Box:

x = 0, y = 0, w = 100, h = 100

Red Box:

x = 50, y = 0, w = 70, h = 70

Testing Collision

To see if these boxes are touching, we need to calculate how far apart they are in the x and y axis. You get these distances by subtracting the x's and y's from each other like this:

x distance = x - x = 50 - 0 = 50

y distance = y - y = 0 - 0 = 0

We know the boxes are touching if both these conditions are true:

1) x distance <= half the width of one box + half the width of the other box.

2) y distance <= half the height of one box + half the height of the other box.

Or in terms of our symbols:

1) x distance <= w / 2 + w / 2

2) y distance <= h / 2 + h / 2

Note:

w / 2 + w / 2 is the maximum X distance allowed if the two boxes are touching
h / 2 + h / 2 is the maximum Y distance

To see where this formula comes from, look at the picture below. Compare the x distance to w / 2 + w / 2. Are the boxes touching? We're ignoring the y distance for now since it's zero.

Collision Detection