Step 16

The final piece for this game is to add several layers of bricks. When the ball hits the bricks, it breaks them.

The game is about breaking all the bricks without letting the ball drop on the ground (hit the bottom of the canvas)!

Create a new file model/Brick.js with the following content:

import Block from "./Block.js";

class Brick extends Block {
  constructor(x, y, width, height, color) {
    super(x, y, width, height, color);
    this.visible = true;
  }

  draw(ctx) {
    if (this.visible) {
      super.draw(ctx);
    }
  }

  colides(ball) {
    if (this.visible && this.intersects(ball)) {
      this.visible = false;
      ball.colides(this); // causes the ball to bounce off
    }
  }
}

export default Brick;

I have used a boolean flag (this.visible) to make a brick disappear when it collides with a ball.

In the next step, we will add several bricks to the canvas.