Collision Detection Between Ball and Paddle

Right now the ball passes through the paddle. We need collision detection so the ball bounces off the paddle and stays in play. We will reuse this logic for other objects later, so we will write it at a higher level of abstraction, inside the Block class.

Detecting Rectangle Intersections

The most common collision strategy for 2D games is axis-aligned bounding box (AABB) testing: check whether two rectangles overlap. Add this intersects method to the Block class:

intersects(other) {
  return (
    this.x < other.x + other.width &&
    this.x + this.width > other.x &&
    this.y < other.y + other.height &&
    this.y + this.height > other.y
  );
}

The method checks whether this rectangle and other overlap on both axes. If one rectangle is entirely to the left, right, above, or below the other, at least one of these four conditions is false and there is no intersection.

Bouncing the Ball Off the Paddle

Now add a collides method to the Ball class. It uses intersects to flip the ball’s vertical direction when the two rectangles overlap:

collides(other) {
  if (this.intersects(other)) {
    this.dy *= -1;  // switch direction
  }
}

When the ball overlaps another block, multiplying dy by -1 reverses its vertical velocity, so the ball moves back upward.

Wiring It Into the Game Loop

Finally, call collides inside the draw function in src/main.js:

  function draw() {
    // ... existing drawing code ...
+   ball.collides(paddle);
  }

Save your code and observe the changes in the browser. The ball now bounces off the paddle instead of passing through it.

Checkpoint: Commit your progress.

git add .
git commit -m "brick-11: Add ball-paddle collision detection"
git push