Step 18

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

Open main.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);

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 function as follows:

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

Save your code and observer the changes in the browser.