Lesson Walkthrough

Lesson: Object-Oriented Game Development – Whack-a-Mole

In this lesson we will study how Object-Oriented Programming (OOP) principles can be applied to build a fun game: Whack-a-Mole.
We will not just play the game, but also learn the design concepts behind it, how the code is organized, and why OOP is powerful for games and larger software projects.

This lesson combines:

You should have made a copy of the game to follow along and complete the hacks at the end of the lesson.

Learning Objectives

By the end of this lesson, you should and will be able to:

The Whack-a-Mole Concept

In Whack-a-Mole, the computer manages a grid of holes. Randomly, a mole (or sometimes a power-up) appears in a hole. The player must click or tap the mole before it disappears.

Key Rules:

This simple idea is perfect for studying OOP: each part of the game (holes, moles, power-ups, score) can be represented as an object.

OOP Structure

We will design the game using classes:

👉 This is an example of inheritance: both Mole and PowerUp inherit from Entity.

👉 This is also composition: the Game is composed of multiple Hole objects.

Spawning Entities

The game must randomly choose where to put new moles or power-ups. This is handled inside the Game class.

Here is the method that chooses an empty hole and places something in it:

spawnEntity() {
    let emptyHoles = this.holes.filter(h => !h.entity);
    if (emptyHoles.length > 0) {
        let hole = emptyHoles[Math.floor(Math.random() * emptyHoles.length)];
        if (Math.random() < 0.8) {
            hole.entity = new Mole(hole, "normal");
        } else {
            hole.entity = new PowerUp(hole, "bonus");
        }
    }
}

  Cell In[5], line 2
    let emptyHoles = this.holes.filter(h => !h.entity);
    ^
SyntaxError: invalid syntax. Perhaps you forgot a comma?

Teaching Explanation

👉 Notice how the Game class does not directly create pixels on screen. Instead, it uses the object system: Hole manages its own location, Entity manages its own lifespan, etc.

📝 FRQ Checkpoint 1

Prompt:

  1. Explain why it is better for the Game class to delegate work to the Hole and Entity classes instead of doing everything itself.
  2. Modify the logic so that GoldenMole appears 5% of the time, worth double points.
  3. Justify how this change demonstrates polymorphism.


Handling Player Input

When a player clicks, the game checks whether the click intersects with a mole or power-up. If so, it calls the object’s onHit() method.

handleClick(mx, my) {
    this.holes.forEach(hole => {
        if (hole.entity &&
            mx >= hole.x - hole.size/2 && 
            mx <= hole.x + hole.size/2 &&
            my >= hole.y - hole.size/2 &&
            my <= hole.y + hole.size/2) {
            hole.entity.onHit(this);
        }
    });
}

Teaching Explanation

Debugging

Debugging is a critical part of learning to code games. Below are step-by-step debugging tips for different parts of the Whack-a-Mole lesson. Use these to find and fix problems as you build. There will be debugging steps all through the lesson.

🟢 Game Setup Issues

🟡 Entity (Mole/PowerUp) Bugs

📝 FRQ Checkpoint 2

Prompt:

  1. Suppose the player clicks slightly outside the hole’s boundary. How does the code prevent counting that as a hit?
  2. Write pseudocode for a new entity Bomb that subtracts points when hit.
  3. Explain how this uses inheritance and overriding methods.


Persisting High Scores with Local Storage

Without local storage, scores vanish when you refresh the page. Local storage lets us keep the high score.

Example implementation:

this.highScore = localStorage.getItem("highScore") || 0;

addScore(points) {
    this.score += points;
    if (this.score > this.highScore) {
        this.highScore = this.score;
        localStorage.setItem("highScore", this.highScore);
    }
}

Debugging

🔵 Score & Storage

Teaching Explanation

👉 This is an example of data abstraction: we don’t worry about how the browser stores data, we just use a simple API.

📝 FRQ Checkpoint 3

Prompt:

  1. Explain why local storage is useful in a game but not always appropriate in secure applications.
  2. Modify the game so it also saves the last score in addition to high score.
  3. How does this relate to Big Idea 5: Impact of Computing?


Big Ideas Connections

This project demonstrates how classroom theory applies to real-world interactive applications.

Reflection Questions



Hack Homework

Try these hacks to extend your Whack-a-Mole game and deepen your understanding of OOP:

  1. Add a New Mole Type
  2. Change the Grid Size
  3. Add Sound Effects
  4. Track Combos
  5. FRQ-style Reflection
  6. Local Storage Challenge