Assignment 6: Pokemon

• 💯 Worth: 6%
• 📅 Due: See due date on Moodle.
• 🚫 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 Pokemon notes and source code.
• Implement a run feature that allows the player to exit a battle before their Pokemon faints.
• Implement a Menu that appears during the player Pokémon’s level up that shows how much each state went up by.
• Implement health and experience progress bars for a sleeker looking UI.

🔨 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.
3. If you have an ad blocker, turn it off for localhost.

🔍 Context

To complete this assignment, you should read and understand all of the Pokemon notes and source code.

Caution

If you’re not comfortable with any of the above, please send me a message on Teams and I can help you! It is your responsibility to ensure you have learned all concepts we’ve seen so far so that you can do the assignment effectively.

Welcome to your seventh (and final) assignment! This week’s code is probably the most complicated we’ve looked at during the semester, and you will need to know how many of the pieces work and fit together in order to accomplish the task ahead.

Note

Don’t just go off of the video below! Make sure you understand the features and read the descriptions before implementing it. The video is just there to give you a visual representation of what the feature should look and sound like.

The grass animations and battle transitions are not requirements for the assignment, I just got carried away while making the demo video. 😅

For this assignment, you must choose one of the two feature sets below to implement, Battle Feature Set or Exploration Feature Set. Both sets are of equal difficulty and worth the same amount of points.

⚔️ Battle Feature Set (90%)

If you choose the Battle Feature Set, you must implement all of the following features:

🏃🏾‍♀️ Run

Implement a run feature that allows the player to exit a battle before their Pokémon faints. The player should be able to select “Run” from the battle menu, which will end the battle and return them to the play state.

Tip

BattleMenuState is probably a good place to start! You’ll need to add a new menu option and handle the transition back to the play state when the player chooses to run.

Deduction	Criteria
(-0)	Correct
(-1)	Run option is not present in the battle menu.
(-2)	Run option exists but does not return to the play state.
(-1)	State instantly pops instead of fading.
(-X)	Other reason detailed in comments.
(-3)	N/A

🧮 Stat Change Panel

Implement a panel that appears during the player Pokémon’s level up that shows, for each stat, X > Y, where X is the old stat and Y is the new stat. This panel should appear right after the “Level Up” dialogue that appears at the end of a victory where the player has indeed leveled up.

Tip

BattleTurnState::processLevelUp() is probably a good place to start! You’ll need to store the old stat values before leveling up, then create a new state or dialogue to display the changes.

Deduction	Criteria
(-0)	Correct
(-1)	Panel does not display old and new stat values.
(-1)	Panel does not appear after level up dialogue.
(-1)	Not all stats are shown (health, attack, defense, speed).
(-X)	Other reason detailed in comments.
(-4)	N/A

🔄️ Progress Bars

Implement health and experience progress bars for a sleeker looking UI. They should clearly indicate that health/experience values are being tweened accordingly.

The health bars should deplete when either Pokémon takes damage in a battle.

• When their health is <= 100%, the bar should be green.
• When their health is <= 50%, the bar should be yellow.
• When their health is <= 25%, the bar should be red.
• The player Pokémon’s health should still have the text indicator (ex. 4/12) as well as the bar, whereas the opponent Pokémon’s health should only have the bar.
• The text indicator should update in real-time as the health bar depletes.

When the player’s Pokémon wins a battle, their experience bar should fill up based on the amount of experience they gained and should play the experience-gain.ogg sound. The opponent Pokémon does not have an experience bar.

Tip

Make a new UI element called ProgressBar where you can set a current value and maximum value. You can then render some rectangles using these initial values as the width of the rectangles. Instantiate ProgressBar objects inside PlayerPanel and OpponentPanel, render and update them as needed, and you should be good to go!

Deduction	Criteria
(-0)	Correct
(-2)	Health bars do not deplete when Pokémon take damage.
(-1)	Health bar colors do not change based on health percentage.
(-2)	Experience bar does not fill up after winning a battle.
(-1)	Player Pokémon health bar number values are not tweened.
(-1)	Experience gain sound is not played.
(-X)	Other reason detailed in comments.
(-6)	N/A

💥 Moves

Implement a move system where Pokémon can have up to 4 different moves instead of just “Fight”. Each move should have its own name and damage value. The starter code only has a basic “Fight” option that does fixed damage so you’ll need to expand this.

Each Pokémon should have a set of moves (look inside pokemon.json), and each move should have properties like name and damage which you should add to moves.json.

Tip

Start by looking at moves.json to understand the move data structure. Then look at pokemon.json to see how each Pokémon has a list of move names. In the Pokemon class, load the move data and store Move objects. You’ll need to modify how damage is calculated in BattleTurnState to use the move’s damage value instead of a fixed amount.

The user interface should allow the player to select which move to use in battle. When the player chooses to attack, they should see a grid of their Pokémon’s available moves (up to 4).

The UI should:

• Display all available moves in a 2x2 grid
• Show empty slots with a hyphen (-) if the Pokémon knows fewer than 4 moves
• Allow the player to navigate through moves using arrow keys
• Display the selected move’s name clearly

Tip

Create a GridSelection UI component that can display items in a 2x2 grid layout. You’ll need a new state like BattleMoveMenuState that pushes onto the state stack when “Fight” is selected from BattleMenuState. The grid should always show 4 slots regardless of how many moves the Pokemon knows.

Deduction	Criteria
(-0)	Correct
(-1)	Moves are not loaded from JSON files correctly.
(-1)	Pokémon cannot have up to 4 moves.
(-1)	Move selection UI is not implemented.
(-1)	Cannot navigate through moves with arrow keys.
(-1)	Empty move slots are not shown with a hyphen.
(-1)	Damage calculation does not use the move’s damage value.
(-1)	UI sounds are not accurate to the video.
(-X)	Other reason detailed in comments.
(-5)	N/A

🔥 Type Effectiveness

Implement a type system where moves and Pokémon have types (Fire, Water, Grass, etc.), and moves are more or less effective based on type matchups. When a move is used, display a message indicating if it was “super effective!” (2x damage) or “not very effective…” (0.5x damage).

Each Pokémon should have a type (already in pokemon.json), and each move should have a type (already in moves.json). Use the type effectiveness chart below to determine the damage multiplier.

Move Type ↓ / Defender Type →	Fire	Water	Grass	Normal
Fire	1x	0.5x	2x	1x
Water	2x	1x	0.5x	1x
Grass	0.5x	2x	1x	1x
Normal	1x	1x	1x	1x

• 2x = Super effective! (display message and play hit-super-effective.wav sound)
• 1x = Normal damage (no message, play hit-regular.wav sound)
• 0.5x = Not very effective… (display message and play hit-not-effective.wav sound)

Tip

You can create a TypeEffectiveness service class that stores the type matchup chart and provides a method like getMultiplier(moveType, pokemonType). Update the damage calculation in BattleTurnState to use this multiplier, and display the appropriate message in BattleMessageState.

Deduction	Criteria
(-0)	Correct
(-1)	Type effectiveness chart is not implemented correctly.
(-1)	Damage multiplier is not applied to move damage.
(-1)	“Super effective!” message is not displayed when appropriate.
(-1)	“Not very effective…” message is not displayed when appropriate.
(-1)	Appropriate sounds are not played for the type effectiveness.
(-X)	Other reason detailed in comments.
(-3)	N/A

📍 Exploration Feature Set (90%)

If you choose the Exploration Feature Set, you must implement all of the following features:

🏠 Player House Map

Create the player’s house interior map using the Tiled map editor. You’ll need to design the map using the provided player-house.png tileset.

The house should:

• Be created in Tiled using the player-house.png sprite sheet as your tileset
• Have proper collision detection (walls, furniture)
• Have three layers: Bottom, Collision, and Top
• Be exported as JSON and placed in the config folder
• Be loaded in your game code and made accessible from the town map

Tip

Refer to the walkthrough of how to use Tiled in our course notes.

Look at how the town map is loaded in PlayState. You’ll need to probably add the house map configuration and create a Map instance for it.

Deduction	Criteria
(-0)	Correct
(-1)	Map is missing one or more required layers.
(-1)	Collision detection is not working properly.
(-1)	Map is not exported as JSON or not placed in correct folder.
(-1)	Map is not loaded in the game code.
(-X)	Other reason detailed in comments.
(-4)	N/A

🚪 Door Transitions

Implement the ability for the player to enter and exit the house using doors with proper animations.

Entering the house (walking UP):

1. From the tile below the door, player attempts to walk UP onto the door tile
2. Player pauses briefly
3. The door sprite changes from CLOSED to OPEN and plays the sound effect
4. Player animates walking one tile UP onto the door tile
5. Screen fades to black
6. Map changes to house interior
7. Screen fades in, player is on the doormat inside

Exiting the house (walking DOWN):

1. Player walks onto the doormat and presses DOWN to exit
2. Screen fades to black
3. Map changes to town exterior
4. Door sprite is already OPEN
5. Screen fades in
6. Player appears on the door tile
7. Player animates walking one tile DOWN below the door tile
8. Door sprite changes from OPEN to CLOSED behind them

Tip

Create a Warp class that stores information about pairs of warp points. It can include things like the destination map, destination position, destination direction, and which warp to connect to. You can define these points from a config file like warps.json, for example.

In PlayState::update(), check if the player is trying to move off a warp tile in the warp’s exitDirection. If so, trigger the appropriate sequence:

• For door entry (UP): use Map::openDoor() and Map::closeDoor() to change door sprites, use the player’s move() to animate the player, then TransitionState.fade() to transition maps
• For door exit (DOWN): use TransitionState.fade() immediately, then on the destination map, position the player on the open door, animate them down, and close the door

The door tile coordinates are typically one tile north (y - 1) of the warp trigger position. The door tile sprite IDs are static fields in the Tile class.

Deduction	Criteria
(-0)	Correct
(-1)	Player cannot enter the house through the door.
(-1)	Player cannot exit the house through the door.
(-1)	Door does not open when entering.
(-1)	Door does not close after exiting.
(-1)	No sound effect plays when door opens.
(-1)	No fade transition between maps.
(-X)	Other reason detailed in comments.
(-6)	N/A

👥 Town NPC

Add an NPC to the town map that the player can interact with. The NPC should:

• Have a sprite rendered on the map (sprite data provided in npcs.json)
• Be positioned at a specific location in the world
• Have collision detection so the player can’t walk through them
• Display dialogue when the player interacts with them with the space or enter key
• Walk around randomly
• Change directions occasionally
• Not walk through walls or other entities
• Turn to face the player when interacted with
• Pause walking while the player is talking to them

Tip

Create an NPC class that extends GameEntity. The NPC data is already in npcs.json for the town. Load this data in PlayState and instantiate your NPC. You’ll probably need to:

1. Create a state machine with NPCIdlingState and NPCWalkingState
2. Handle collision detection in the game loop
3. In PlayerIdlingState, check if the player is facing the NPC when the interaction key is pressed
4. Use DialogueState to display the NPC’s dialogue
5. Use probability checks to randomly decide when the NPC should walk or turn

Deduction	Criteria
(-0)	Correct
(-1)	NPC sprite is not rendered on the map.
(-1)	NPC does not have collision detection.
(-1)	NPC does not display dialogue when interacted with.
(-1)	NPC does not walk around randomly.
(-1)	NPC walks through walls or other entities.
(-1)	NPC does not turn to face the player when interacted with.
(-X)	Other reason detailed in comments.
(-8)	N/A

👩 Mom NPC

Add Mom as an NPC inside the player’s house. Mom should:

• Have a sprite rendered in the house (sprite data provided in npcs.json)
• Be positioned at one of the chairs in the house facing the table
• Have collision detection
• Display dialogue when the player interacts with her
• Remain stationary (no walking behavior required)

Tip

You should reuse your NPC class but just don’t include walking behavior.

Deduction	Criteria
(-0)	Correct
(-1)	Mom sprite is not rendered in the house.
(-1)	Mom does not have collision detection.
(-1)	Cannot interact with Mom using space or enter key.
(-1)	Mom does not display dialogue when interacted with.
(-X)	Other reason detailed in comments.
(-3)	N/A

💡 Work Smarter

• You’re going to be starting the game over and over and over again, dozens of times. Instead of going through the title screen every time you refresh, make it so that you start in the play state from the outset.
• When testing a particular feature you’re implementing, hardcode the parameters to work to your advantage.
  • For example, when working on the progress bars, set up your environment so that you always start in a battle right away instead of having to walk through grass every time to encounter a Pokemon.

Taking the time at the beginning to set up your game in a state that is conducive to testing will save you tons of time down the road - trust me! And this isn’t just for game programming, this goes for any type of development you do. 😉

📝 Dev Log (5%)

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.

💬 Peer Assessment (5%)

You’ll use the Moodle Workshop feature to give feedback on 3 of your peers’ submissions. Peer assessment is a core developer skill. Reading others’ code and giving constructive feedback is something you’ll do constantly in real software teams. It also helps you improve your own work by seeing how others solved the same problem.

Note

If you believe you’ve been unfairly assessed by a peer, come see me. I’ll review your case and make sure your grade reflects a fair and accurate evaluation.

💻 Code Walkthrough

For each assignment, I will randomly select a few students for a short (10-15 minute) one-on-one code walkthrough. You’ll be asked to explain your implementation, reflect on your design decisions, and answer a few questions. This helps ensure understanding, promotes academic integrity, and prepares you to communicate your work which is an essential skill for every developer. You can be selected for any assignment, so always be ready to walk me through your code.

🌿 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

Before submitting your assignment, ensure that your map includes all the necessary elements for your peers to properly evaluate your submission. Ensure all relevant features are included and testable in your map, and describe them clearly when you submit.

1. Go to Gradescope, click the link for this assignment, select the correct repository and branch from the dropdown menus, and click Upload.
2. Go to Moodle and click the link for this assignment in the calendar.
3. Click the blue Add Submission button at the top of the workshop page.
   1. Title: A6 Pokemon Submission.
   2. Submission content: Describe which features you implemented in the description of the workshop submission along with anything your reviewers should know about your game/code.
   3. Zip your assignment folder and attach it as a file. To ensure anonymity:
      • DO NOT include your name in any of the files or folders
      • DO NOT include the .git folder before zipping, otherwise it will contain your commit history which has your name and email in it
      • Optionally, you may include your .devlog.md file if you want to share your design diary with your reviewers
4. Click the Save changes button at the bottom.
5. You’ll be able to start assessing your peers the day after the assignment is due.