Brick Breaker

We will develop a game called Brick Breaker based on a tutorial on MDN website. The original tutorial does not use classes, but we will design and build the game the Object-Oriented way. This chapter is where we cover Object-Oriented Programming in JavaScript. It also introduces the HTML Canvas element, which is used to build web-based animations and games.

Getting Started

Go to the brick-breaker-game repository and click “Use this template” → “Create a new repository” to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> brick-breaker-game
cd brick-breaker-game
code .

The template is pre-configured with Vite (just like the ToDo App project from the previous chapter). Install dependencies and start the dev server:

pnpm install
pnpm dev

You should see a blank page when you open the dev server in your browser.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Use the HTML Canvas element and animation loops to render and animate 2D graphics
  • Model game objects as classes, and use inheritance to share and specialize behavior across related objects
  • Implement core game mechanics such as movement, boundary constraints, and collision detection
  • Build a complete, playable game by integrating rendering, input handling, scoring, and win/lose conditions

Sections

  1. Drawing on the Canvas
  2. Animating the Ball
  3. Modeling Game Objects with Classes
  4. Using the Block Class
  5. Extending Block with a Sprite Class
  6. Using the Sprite Class
  7. Creating a Bouncing Ball
  8. Refining the Ball Bounce Logic
  9. Building the Paddle
  10. Clamping the Paddle to the Canvas
  11. Collision Detection Between Ball and Paddle
  12. Detecting Game Over
  13. Creating the Brick Class
  14. Creating a Brick Grid
  15. Tracking and Displaying the Score
  16. Adding a Win Condition
  17. Practice Questions