Return to main OOP lesson page

---

Lesson 1 — The Game class & how inheritance works

Big picture

• Inheritance lets a class reuse and extend behavior from a parent (base) class.
• In this project, GameObject is the base class. Visual things in the game—Ball, Paddle, Brick, PowerUp—inherit from it using extends.
• Composition is also used: the Game class has a ball, paddle, bricks, etc., and coordinates them. Game itself doesn’t inherit from anything—it manages objects that do.

Base class → GameObject

// Base GameObject class - provides common functionality
class GameObject {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    draw(ctx) {
        // Base draw method - to be overridden
    }
    
    update() {
        // Base update method - to be overridden
    }
}

This tiny class centralizes shared position (x, y) and provides placeholder draw/update hooks for subclasses to override. Source: OOP Breakout file.

Subclasses → Ball and Paddle inherit

// Ball class - handles ball physics and movement
class Ball extends GameObject {
    constructor(x, y, radius = 8) {
        super(x, y);
        this.radius = radius;
        this.dx = 2;
        this.dy = -2;
        this.color = "#0095DD";
    }
}

Ball inherits x/y (through super(x, y)) and adds its own data: size (radius), velocity (dx, dy), and color. Source: OOP Breakout file.

// Paddle class - handles paddle movement and controls
class Paddle extends GameObject {
    constructor(x, y, canvasWidth, canvasHeight) {
        super(x, y);
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        this.baseWidth = 75;
        this.width = this.baseWidth;
        this.height = 10;
        this.color = "#0095DD";
        this.speed = 7;
        this.leftPressed = false;
        this.rightPressed = false;
    }
}

Paddle also inherits from GameObject, adding canvas bounds, size, color, speed, and input flags. Source: OOP Breakout file.

The conductor → Game composes everything

// Main Game class - controls game state and orchestrates everything
class Game {
    constructor(canvasId) {
        this.canvas = document.getElementById(canvasId);
        this.ctx = this.canvas.getContext("2d");
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        
        // Game state
        this.score = 0;
        this.lives = 3;
        this.level = 1;
        this.paused = false;
        this.gameRunning = false;
        
        // Game objects
        this.ball = new Ball(this.width / 2, this.height - 30);
        this.paddle = new Paddle((this.width - 75) / 2, this.height - 10, this.width, this.height);
        this.bricks = [];
        this.powerUps = [];
        
        // ... more: events, bricks, loop
    }
}

Game owns the objects and state (score, lives, level), initializes them, and later runs the loop, handles collisions, etc.—that’s composition in action. Source: OOP Breakout file.

Try it: Add a new subclass (e.g., Particle extends GameObject) and let Game hold an array of particles. This shows how inheritance (shape) and composition (owning many) play together.

---

ACTIVITY: showcase what you learned, draw out what you learned in the Whiteboard below.

Press r to change brush color to red. Press b to change brush color to blue. Press g to change brush color to green. Press c to clear blackboard.

---

👉 Click this for full source code