Skip to content
Game Programming

Assignment 0: Pong

  • 💯 Worth: 2%
  • 📅 Due: See due date on Moodle/Gradescope.
  • 🚫 Penalty: Late submissions lose 10% per day to a maximum of 3 days. Nothing is accepted after 3 days and a grade of 0% will be given.

🎯 Objectives

Section titled “🎯 Objectives”
  • Read and understand all of the Pong notes along with the starter code.
  • Implement a basic AI for either Player 1 or Player 2.
  • Adjust the AI to include a difficulty setting.
  • Create an interface for changing difficulty using a range slider.
  • Reflect on your development process and any AI usage in the .devlog.md file.

🔨 Setup

Section titled “🔨 Setup”
  1. Fork (do not download as a zip) the starter repository from GitHub. Make sure you use the link from Moodle to fork the proper repository for this assignment.
  2. Follow the environment setup instructions.
  3. Start Live Server in VSC by right-clicking on index.html and selecting Open with Live Server. This will open a new tab in your browser with the game running.

🔍 Context

Section titled “🔍 Context”

Your first assignment in the course will be a fairly easy one, since the dive into game development can be deep enough as it is without having to implement an entire code base from scratch. Instead, we’ll take the Pong example we learned in class and extend it in a small but fun way by giving one of the paddles logic for playing the game so that you don’t always need a buddy to play the game with you. We’ll approach assignments in the course this way generally, taking the full code bases we’ve used in lecture and extending them so that you’ll get plenty of experience exploring fully implemented games. You can even use these projects as templates for your own games!

Once you’ve forked the repo, the actual change you’ll be making to the code base is small, but it will require you to understand what many of the pieces do, so be sure to review the lecture notes and read through the code so you have a firm understanding of how it works before diving in.

✅ Requirements

Section titled “✅ Requirements”

  1. 🧠 AI-Controlled Paddle (50%)

    Section titled “🧠 AI-Controlled Paddle (50%)”

    Implement a basic AI-controlled paddle (left or right) that tracks and hits the ball. This AI logic should replace the keyboard input for that paddle. In particular, take note of how paddle movement works, reading both the Paddle class as well as the code in main.ts that actually drives the movement, located in the update() function (currently done using keyboard input for each). If our agent’s goal is just to deflect the ball back toward the player, what value needs to inform its movement?

  2. ⚡ Difficulty Setting (20%)

    Section titled “⚡ Difficulty Setting (20%)”

    Add a difficulty setting that makes the AI paddle less responsive. For example:

    • difficulty = 1 → very slow to track the ball
    • difficulty = 5 → moderate tracking
    • difficulty = 10 → very fast and hard to beat

    It doesn’t have to be necessarily a scale from 1-10, it’s up to you how you’d like to represent difficulty. Use this value to scale the AI’s paddle speed. Altering the difficulty should be done by changing a variable. In the next step, you’ll implement a UI element to control this variable.

  3. 🎛️ Difficulty Control (20%)

    Section titled “🎛️ Difficulty Control (20%)”

    Create an <input> control in index.html to let the player adjust the AI difficulty. The type of input is up to you based on your design preferences. When the input is changed, update the AI paddle’s behavior in real time using JavaScript. Do not implement this inside the canvas, be sure to use standard HTML controls. From your web experience, you should be familiar with how to use the input event to detect changes to the slider.

    For example, you might add something like this to index.html:

    <label for="difficulty">AI Difficulty:</label>
    <input
      type="range"
      id="difficulty"
      name="difficulty"
      min="1"
      max="10"
      value="5"
    />
    <span id="difficulty-value">5</span>

    Then, you can use JavaScript to update the AI paddle’s behavior based on the selected difficulty level.

📝 Assignment Policies

Section titled “📝 Assignment Policies”

Read the assignment policies and make sure you include a proper .devlog.md file. For this first assignment, there will be no peer evaluation component.

📥 Submission

Section titled “📥 Submission”

  1. Accept the invitation to Gradescope in your JAC email.

  2. Go to Gradescope and click the link for this assignment.

  3. Select the correct GitHub repository and branch from the dropdown menus.

  4. Click Upload.