Step 16

We are technically done with this game. Let's count score and display it.

Open script.js and declare a score variable outside of the draw function:

let score = 0;

Add the following three lines somewhere inside the draw function to display the score:

ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: " + score, 8, 20);

Finally, we must increment the score when a brick is hit. Update the Brick.colide method to return a boolean!

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

Now update the draw method where the brick.collide is called:

bricks.forEach((brick) => {
  brick.draw(ctx);
  score += brick.colides(ball);
});

Save your code again and try it in your browser.