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.