Pong Game: Updated Version with Wins Tracker & Difficulty Modes

This notebook explains what was changed from the original Pong game to the updated version.
We’ll walk through code changes, object-oriented design choices, and provide the final deliverables at the end.

Key Changes from Original Pong

1. drawText Improvements

  • Before: drawText always used 30px Arial, so all text (scores, win counters, messages) looked the same size.
  • After: Added a size parameter so text size can be customized. 
    function drawText(text, x, y, color = "white", size = 30) {
  ctx.fillStyle = color;
  ctx.font = `${size}px Arial`;
  ctx.fillText(text, x, y);
}
  • This allows scores to stay large while win counters are smaller (18px).

2. Wins Tracker (Persistent Across Games)

  • Introduced two new variables stored in localStorage: 
    let player1Wins = parseInt(localStorage.getItem("pongPlayer1Wins") || "0");
let player2Wins = parseInt(localStorage.getItem("pongPlayer2Wins") || "0");
  • Added saveWin(winner) function to update counters when a match ends.
  • Displayed above the canvas in yellow, smaller than main scores: 
    drawText("P1 Wins: " + player1Wins, 50, 30, "yellow", 18);
drawText("P2 Wins: " + player2Wins, canvas.width - 200, 30, "yellow", 18);

3. Difficulty Modes

  • Added Easy / Normal / Hard buttons to adjust:
    • Ball speed (ball.baseSpeed).
    • Paddle height (paddleHeight).
  • Example: 
    if (mode === "easy") {
  ball.baseSpeed = 3;
  paddleHeight = 120;
} else if (mode === "hard") {
  ball.baseSpeed = 10;
  paddleHeight = 80;
}
  • Difficulty is saved in localStorage, so the setting stays the same between sessions.

4. Game Restart Button

  • When a match ends, a Restart Game button appears.
  • Clicking it resets:
    • Scores.
    • Ball position.
    • Game state (gameOver = false).

Object-Oriented Programming (OOP) Usage

  • Paddle class
    • Handles paddle position, movement, and drawing.
  • Ball class
    • Handles ball physics, collision detection, and resetting.
  • These classes make the game easier to extend (like adding AI opponents or power-ups later).

Final Details

  1. Updated Files
    • The full HTML/JS file (see updated pong.html) with:
      • Wins tracker.
      • Difficulty modes.
      • Restart button.
      • Improved text rendering.

  2. Brief Feature Explanation
    This updated Pong game adds a persistent wins tracker and difficulty modes.
    The tracker stores wins across sessions, while difficulty settings let players adjust ball speed and paddle size.

  3. OOP Implementation
    • Paddle objects (player1, player2).
    • Ball object.

Hack Takeaway

With this hack, we turned a simple Pong clone into a structured, expandable project.
With OOP, UI enhancements, local storage, and difficulty settings, we can now add more features much easier.