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

• Read and understand all of the Pong notes and source code from Lecture 0.
• 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

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. 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

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

1. 🧠 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.js 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%)

   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%)

   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.

4. 📝 Dev Log (10%)

   You’ll find a .devlog.md file in the project root. This file is your design diary. It’s where you document how you approached the assignment, what decisions you made, what challenges you encountered, and how you worked through them, including how you used any AI tools.

   This is not a summary of your final product (that’s what your code and commit messages show). Instead, it’s a reflection of your process and thinking.

   What to write:

   • What approach you chose and why
   • Any bugs or roadblocks you encountered and how you solved them
   • How you tested and verified your implementation
   • If you used AI tools (e.g. ChatGPT, Claude, Copilot), describe:
     • What you asked
     • What it returned
     • What you kept or changed
     • Include links to relevant chat logs when possible

   What makes a good devlog:

   • Specific technical insights (e.g. “I struggled with connecting the AI paddle’s movement to the ball’s position. I solved this by…”)
   • Honest reflection on what you understood and what confused you
   • Commentary on any AI output you received—what was useful, what wasn’t

   What makes a weak devlog:

   • Restating the assignment prompt
   • Only describing what the final code does, without process
   • Hiding or omitting AI tool usage
   • Generic statements with no technical substance

   Be concise. Bullet points are fine.

   Caution

   This must not be generated by AI since I’m looking for your personal reflection.

   Criteria	Standard
   Process Reflection	Clear explanation of approach, design decisions, and problem-solving steps
   Technical Detail	Specifics about code structure, logic, or bugs encountered and fixed
   AI Usage Disclosure	Clearly explains how AI was used, what was kept/changed, with reasoning
   Insight & Critical Thinking	Thoughtful reflection on what was learned, understood, or found challenging
   Clarity & Format	Concise, readable, well-structured with bullet points or short paragraphs

🤖 AI Involvement Category

At the top of your .devlog.md, you must declare your AI involvement category by selecting the option that best describes how you used AI during the assignment:

Category	Description
No Use	You did not use any AI tools at any point.
Tutor	You used AI to explain code, concepts, or errors. No code was generated by AI.
Assistant	You asked AI for code suggestions or snippets and integrated them with understanding.
Reviewer	You wrote the code yourself, then used AI to review, critique, or suggest improvements.

Danger

You must explain your AI usage in your .devlog.md. If you used AI but do not disclose it, that will be considered academic dishonesty.

🌿 Git

We will be using GitHub and Gradescope to submit in this course. You can use either the Git CLI or you can also use VSC’s built-in Git GUI client.

	Visual Studio Code (GUI)	Command Line (CLI)
1	Click the Source Control icon (third down on the left sidebar)	git status - View changed files
2	Click + to stage all changes, or + next to individual files	git add . or git add <filename> - Stage changes
3	Type a commit message in the text box, then click the ✔ to commit	git commit -m "Your message" - Commit staged changes
4	Click ... and choose Push to upload your commit to GitHub	git push - Push commits to GitHub

Commit frequently. It’s good practice, and it also creates a traceable history of your progress.

📥 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.