👨‍💻 Authors: Manas G, Sai T, Aashray R, Anvay Y, Akshay N, Gushawn B

Pong Game Development Masterclass – Debugging

Master Game Development with Interactive Pong — Learn Canvas API, Game Loops, and Advanced JavaScript — Task

We already have a basic Pong game. The ball moves, paddles respond, and you can score points. That's great — but very simple. Now let's make it more exciting and professional.

🚀 COMMIT #1: Initial Setup

Before we start coding, let's set up our Git workflow!

Every time you make a significant change to your game, you should commit your progress. This helps you:

  • Track your development progress
  • Revert to working versions if something breaks
  • Show your teacher your step-by-step work
  • Build good development habits

How to commit in VS Code:

  1. Open the Source Control panel (Ctrl+Shift+G or Cmd+Shift+G)
  2. You'll see all your changed files listed
  3. Click the + button next to each file to "Stage" it (or click the + next to "Changes" to stage all)
  4. Type a commit message in the text box: Commit #1: Initial Pong game setup
  5. Click the ✓ button (Commit) or press Ctrl+Enter
  6. Click the ... menu and select "Push" to upload to your repository

What You'll Practice

  • Writing and reusing JavaScript functions
  • Keeping game code organized in the right files
  • Using if statements to control game events
  • Storing and loading game settings with localStorage
  • Introducing Object-Oriented Programming (OOP) concepts for cleaner code
  • Regular Git commits to track your progress

Part 1 – Add a New Feature

Your task: add a feature that makes Pong more fun or challenging.

Requirements

  • At least one new function
  • An if statement to check conditions (like score or collisions)
  • Proper placement in HTML, CSS, or JavaScript
  • Use of localStorage if you want the feature saved between plays

Example Feature Ideas

  • Speed Boost Mode – Ball speed increases after every few points
  • Power-Ups – Items that appear and temporarily affect paddle or ball behavior
  • Score-Based Unlock – New paddle colors or backgrounds after hitting milestones
  • Custom Difficulty – A menu option to change ball or paddle speed

Steps

  1. Decide on your feature and write down what it should do.
  2. Add any new elements (buttons, text) in the HTML.
  3. Write a function to make the feature work.
  4. Use an if statement so it only runs under the right conditions.
  5. If needed, save its state using localStorage.
  6. Test thoroughly to make sure everything works.
🎯 COMMIT #2: Feature Planning

After planning your feature:

Commit your planning work before you start coding:

Commit Message: Commit #2: Plan [YOUR_FEATURE_NAME] - added design notes and requirements

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

🔧 COMMIT #3: HTML Structure

After adding HTML elements:

Commit your HTML changes:

Commit Message: Commit #3: Add HTML structure for [YOUR_FEATURE_NAME]

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

⚡ COMMIT #4: JavaScript Function

After writing your JavaScript function:

Commit your function implementation:

Commit Message: Commit #4: Implement [YOUR_FEATURE_NAME] function with if statements

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

💾 COMMIT #5: localStorage Integration

After adding localStorage functionality:

Commit your persistence feature:

Commit Message: Commit #5: Add localStorage persistence for [YOUR_FEATURE_NAME]

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

✅ COMMIT #6: Feature Complete

After testing and finalizing your feature:

Commit your completed feature:

Commit Message: Commit #6: Complete [YOUR_FEATURE_NAME] - tested and working

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

Part 2 – Moving to Object-Oriented Programming (OOP)

What is OOP?

OOP is a way of structuring your code by grouping data and actions into objects. Each part of the game (ball, paddle, score system) can become an object, making the code more organized and easier to expand.

OOP Concepts in Pong

  • Class → A blueprint for game elements (e.g., Paddle, Ball)
  • Object (Instance) → A specific element in the game (e.g., Player Paddle, AI Paddle)
  • Properties → Variables that belong to the object (e.g., position, speed, score)
  • Methods → Functions that belong to the object (e.g., move(), reset(), collide())
  • Encapsulation → Each object manages its own behavior (e.g., only the Ball handles bouncing logic)
  • Persistence with localStorage → Save and load game settings or scores

Example Student Tasks

  • Create a Paddle class with properties like position, size, and speed.
  • Add methods like moveUp() and moveDown().
  • Create a Ball class with properties (position, velocity) and methods (move(), checkCollision()).
  • Update the game loop to use these objects instead of separate variables.
  • Use localStorage to save the highest score or game settings.
🏗️ COMMIT #7: OOP Planning

After planning your OOP structure:

Commit your OOP design:

Commit Message: Commit #7: Plan OOP structure - design classes for Paddle, Ball, and Game

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

📦 COMMIT #8: Paddle Class

After creating the Paddle class:

Commit your Paddle class:

Commit Message: Commit #8: Create Paddle class with position, size, and movement methods

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

⚽ COMMIT #9: Ball Class

After creating the Ball class:

Commit your Ball class:

Commit Message: Commit #9: Create Ball class with physics and collision detection

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

🔄 COMMIT #10: Game Loop Update

After updating the game loop to use OOP:

Commit your refactored game loop:

Commit Message: Commit #10: Refactor game loop to use Paddle and Ball classes

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

💾 COMMIT #11: localStorage OOP

After adding localStorage to OOP structure:

Commit your persistence implementation:

Commit Message: Commit #11: Add localStorage persistence to OOP game structure

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

Final Deliverables

  • Your updated files with the new feature.
  • A brief explanation (2–3 sentences) describing the feature and how it works.
  • If you applied OOP, include which classes and objects you created.
  • Your Git commit history showing your development progress!

This lesson turns a simple Pong game into a structured, expandable project — preparing you for more advanced game development challenges.

📝 COMMIT #12

Before submitting, write a short reflection (3–4 sentences):

  • What was the most challenging part of adding your feature?
  • How did using commits help you track progress?
  • What did you learn about debugging or OOP in this project?

Commit Message: Commit #12: Added project reflection

🎉 COMMIT #13: Final Submission

Final commit before submission:

Commit your completed project:

Commit Message: Commit #13: Complete Pong game with [YOUR_FEATURE_NAME] and OOP structure - ready for submission

Use the same VS Code steps as Commit #1: Source Control panel → Stage files → Type message → Click ✓

Then push: Click the ... menu and select "Push" to upload to your repository

flowchart TD A[Start Pong Lesson] --> B[Build Pong Game] B --> C{Bug Found?} C -->|Yes| D[Document Issue] D --> E[Debug & Fix] E --> B C -->|No| F[Working Game] F --> G[Reflect & Blog] G --> H[Share with Class] F --> I[Add New Feature] I --> J{Feature Works?} J -->|Yes| K[Save Progress with localStorage] J -->|No| L[Debug Feature] L --> I K --> G B --> M[Commit Progress] I --> M K --> M M --> N[Push to Repository]

Pong Lesson Quiz – Advanced Concepts

1. Why is Object-Oriented Programming (OOP) beneficial in building a Pong game?

  • It allows grouping related data and behavior into objects, making the game easier to expand and maintain.
  • It makes the game load faster.
  • It automatically fixes bugs in the code.
  • It replaces the need for functions and variables.

2. You want a new power-up to only appear when the player's score reaches 50. Which programming concept is critical for implementing this?

  • Loops
  • If statements / Conditional logic
  • Functions without arguments
  • CSS transitions

3. Which of the following best describes the use of localStorage in a Pong game?

  • It temporarily stores game data that disappears when the page is refreshed.
  • It permanently stores game settings and high scores in the browser so progress persists across sessions.
  • It prevents the game from running slowly.
  • It automatically generates new game features.

4. Why is it important to commit your code after each significant change during game development?

  • It makes your code run faster.
  • It allows you to track progress, revert to working versions, and demonstrate your development process to teachers.
  • It automatically fixes bugs in your code.
  • It prevents other students from copying your work.