Two rectangles colliding

Question

I'm making a simple game. I have one stationary rectangle and one moving only on the y axis. It looks like this.
The right car is moving down. The two cars have a width of 40 and a height of 80.

When I check collision like this it doesn't work properly.

if (dist(other_car.x, other_car.y, main_car.pos.x, main_car.pos.y) < 40) {
  console.log("colliding");
}

How do I make it more accurate?

you should check for collision of the enclosing boxes of each car — jcuypers, Feb 25 '19 at 18:47
see the answer here: its already defined: https://stackoverflow.com/questions/31022269/collision-detection-between-two-rectangles-in-java — jcuypers, Feb 25 '19 at 18:51
Possible duplicate of [Colision detection p5.js](https://stackoverflow.com/questions/45650655/colision-detection-p5-js) — cdrom, Feb 25 '19 at 19:03

score 1 · Accepted Answer · answered Feb 25 '19 at 19:01

1

Right now you're doing circle-circle collision detection. You want to be doing rectangle-rectangle collision detection.

Shameless self-promotion: here is a tutorial on collision detection. It's written for Processing, but all of the ideas apply to P5.js as well.

Googling "rectangle-rectangle collision detection" will also return a ton of results. Good luck!

answered Feb 25 '19 at 19:01

Kevin Workman

41,537
9
68
107

Thanks for helping! – Stefan Velikov Feb 25 '19 at 19:03

Two rectangles colliding

1 Answers1