Click here to go back to main page

OOP Breakout Game (w/ Advanced Features)

Object-Oriented Programming Architecture:

  • GameObject Base Class: Shared properties (x, y, draw methods) - though minimal inheritance used
  • Ball Class: Handles movement, collision detection, and physics
  • Paddle Class: Manages size, position, and user input
  • Brick Class: Individual brick state and power-up properties
  • PowerUp Class: Falling mechanics and effect application
  • Game Class: Central controller for state management and game loop

Controls: Use arrow keys or mouse to move paddle

Hack #1 (90%): Change Colors

Look in the JavaScript classes and change the paddle and brick colors.

  • Pick a new color for the paddle and the bricks.
  • Change the Colors in the Ball, Paddle, and Brick class constructors (look for this.color = "#0095DD").
  • Tip: High-contrast colors look best on a black background.

Hack #1 (100%): Go Further with Colors

  • Try creating a color picker below the game to change the color of the ball or blocks on the fly.
  • Extra challenge: Try using gradients in the Brick class draw method.
  • Advanced: Add a method to each class to dynamically change colors during gameplay.

Hack #2 (90%): Change Ball Speed

Look in the Ball class constructor and change the ball speed.

  • Pick a new speed for the ball by modifying this.dx and this.dy values.
  • Change the ball speed in the Ball constructor to update the game difficulty.
  • Tip: Don't make the speed too high! It will be too hard!
  • Hint: In the Ball class constructor, this.dx = 2 and this.dy = -2 determine the initial speed.

Hack #2 (100%): Advanced Ball Speed

  • Make the ball speed up each time it hits a brick or the paddle by modifying the collision methods.
  • Add a speed increment to the collisionDetection() method in the Game class.
  • Also, try adding a "slow motion" mode by adding a new method to the Ball class that halves the speed.
  • Challenge: Add a keyboard control (like spacebar) that toggles slow motion during gameplay.

OOP Bonus Hacks:

  • Multiple Balls: Modify the Game class to handle an array of Ball objects instead of just one.
  • New PowerUp Types: Extend the PowerUp class to include different types (speed boost, multi-ball, etc.).
  • Custom Brick Types: Create subclasses of Brick with different behaviors (multi-hit bricks, moving bricks).
  • Particle Effects: Create a Particle class for visual effects when bricks are destroyed.
  • Better Inheritance: Add meaningful shared methods to GameObject class (collision detection, bounds checking).

OOP Breakout Game Lesson

Learn Object-Oriented Programming

Learn the basics of building a Breakout-style game using Object-Oriented Programming principles in JavaScript.

In this refactored version, you'll understand how to organize code into classes, manage game state, and create reusable components for game development.

  • Understand how classes encapsulate game object behavior.
  • Learn the difference between encapsulation and true inheritance.
  • Practice creating modular, maintainable game architecture.
  • Explore how OOP makes adding new features easier.

Click here to read the full lesson