Assignment 3: Mario

• 💯 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 Mario notes and source code.
• Implement coins, platforms, or death animations.
• Implement either a mushroom or star power-up.

🔨 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. Download the Tiled map editor from here. You’ll need this to edit the map files in the config folder.
4. Open config/tilemap.tmx in Tiled to see the map data. You can edit the map by adding or removing tiles by clicking the tiles in the lower right corner and then clicking on the map to place them.

   Missing Tileset

   1. If you see all red tiles in the main map editor area, there will be an error at the top asking you to locate the tileset. Click “locate” and select config/tiles.tsx.
   2. If you see: The number of tile columns in the tileset ‘mario-tiles’ appears to have changed from 5 to 9. Do you want to adjust tile references? click Yes and simply repaint any of the wonky tiles to the correct sprites.
5. Click File -> Export As and save the file as tilemap.json in the config folder.
6. Refresh the Live Server tab to see your changes.

🔍 Context

To complete this assignment, you should read and understand all of the Mario notes and source code and be familiar with the following concepts:

• Sprite Animation: Understanding how to animate sprites.
• Tile Collision: Understanding how to detect and respond to collisions with tiles.
• 2D Physics: Understanding how to move and interact with objects in a 2D space.

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 fourth assignment! There was a lot to learn with cameras, tilemaps, entities, and game objects, but our game is still lacking in a few areas. By extending its functionality, we’ll have something even closer to famous titles like Super Mario Bros.!

✅ Pick 2/3 Features (40%)

Note

Make sure you’re logged into Moodle to play the videos below. However, don’t just go off of the video! Make sure you understand the feature and read the descriptions before implementing it. The video is just there to give you a visual representation of what the feature should look like. If the videos are blurry, make sure the quality is set to 1080p.

🪙 Coin Collection

• Add coins to the map that the player can collect.
• Implement a mechanic to spawn coins from blocks when the player hits them.
• Play coin.wav when the player collects a coin.
• Play bump.wav when the player hits a block. Since the coin is coming out of the block, play coin.wav as well.

Tips

• Create a Coin.js class to represent a coin.
• When parsing the map data in Map.js, if you see a coin, instantiate a coin object at that location and keep an array of all coins in the map.
• Update and render all coins on the map.
• Inside Player.js, check for collisions with coins and remove them from the map when the player collides with them.

Deduction	Criteria	Details
(-0)	Correct
(-1)	Coins spawned from blocks do not noticeably travel up and down before disappearing.	Test hitting a block to ensure spawned coins visibly rise and fall before disappearing.
(-1)	Free-floating coins do not play the spinning animation.	Verify that free-floating coins visibly animate with a spinning effect.
(-1)	Player cannot collect coins or they aren’t removed properly.	Test collecting multiple coins to ensure they disappear and play coin.wav.
(-X)	Other reason detailed in comments.
(-4)	N/A

⬆️ Platforms

• Add platforms that the player can jump through from below/the side and land on from above.
• Ensure the player can stand on these platforms and move horizontally while on them.
• Collision with blocks and ground tiles in any direction should be unchanged. Platform tiles are specifically the ones with the sprite indeces 3 and 4 from the spritesheet.

Tips

• PlayerState and CollisionDetector are where we check for vertical collisions with the map. You’ll want modify the logic to ignore collisions with platforms when the player is moving upwards.

Deduction	Criteria	Details
(-0)	Correct
(-2)	Player does not properly land on or pass through platforms.	Jump from below and from the side to ensure the player can land on platforms but not pass through from above.
(-2)	Player movement on platforms is inconsistent.	Test horizontal movement while standing on platforms to ensure smooth movement.
(-X)	Other reason detailed in comments.
(-4)	N/A

😵 Death Animation

• Implement a death animation for the player character when they get hit by a Goomba and when they fall off the bottom edge of the map.
• Implement a death animation for the Goomba when they get jumped on by the player.
• Make the player jump a small amount when falling on a Goomba.
• Play player-down.mp3 when the player dies.
• Play stomp.wav when the player jumps on a Goomba.

Tips

• Create a PlayerDyingState that switches to the dying sprite and then resets the player’s position.
• Sprite locations can be found in SpriteConfig.js.
• The animation itself can be as simple as tweening the player/Goomba off the screen, or increasing their Y position until they’re off the screen. I encourage you to get creative with this!

Deduction	Criteria	Details
(-0)	Correct
(-2)	Death animation does not play correctly for the player.	Test player death animation by colliding with a Goomba.
(-1)	Sound does not play correctly for the player death.	Ensure player-down.mp3 is played after player dies.
(-2)	Death animation does not play correctly for the Goomba.	Test Goomba death animation by jumping on a Goomba.
(-1)	Sound does not play correctly for the Goomba death.	Ensure stomp.wav is played after Goomba dies.
(-2)	Player does not jump a small amount when falling on a Goomba.	Test by jumping on a Goomba and see if the players jumps s bit off the Goomba.
(-X)	Other reason detailed in comments.
(-4)	N/A

✅ Pick 1/2 Feature (50%)

🍄 Mushroom

• Create a mushroom entity with its own movement physics, see video for details.
• The mushroom should appear when the player hits a block, fall off the block, hit the ground, and move in a straight line until it hits a wall.
• Play sprout-item.wav when the mushroom appears.
• Play powerup.wav when the player collects a mushroom.
• Play a grow animation for the player when collecting a mushroom and increase their height appropriately.
• Play a shrinking animation when the player gets hit by an enemy and decrease their height appropriately.
• Play pipe.wave when the player shrinks.
• Add a lifetime and flicker-out effect for mushrooms by using the Timer class.

Tips

• Create a new Mushroom.js class.
• When parsing the map data in Map.js, if you see a mushroom, instantiate a block object which contains a mushroom at that location and keep an array of all mushrooms in the map.
• Create PlayerGrowingState and PlayerShrinkingState. When the player collides with a mushroom, switch to the growing state. When the player collides with an enemy when big, switch to the shrinking state.
• Update and render all mushrooms on the map.
• Inside Player.js, check for collisions with mushrooms and remove them from the map when the player collides with them.
• The animation sprites can be found in SpriteConfig.js.
• Set the context.globalAlpha to flicker out the mushroom after a certain period of time. Make sure to reset it back to 1 after you’re done flickering or else it will affect other sprites.

Deduction	Criteria	Details
(-0)	Correct
(-2)	Mushroom does not spawn or move correctly.	Ensure the mushroom spawns from a block and moves along the ground when it falls.
(-2)	Mushroom does not interact with the player correctly.	Test collecting the mushroom and ensure powerup.wav plays and the player grows.
(-2)	Player does not shrink correctly after getting hit while big.	Test shrinking animation when getting hit by a Goomba, ensure pipe.wav plays.
(-2)	Player does not die correctly after getting hit while small.	Ensure the player can still die after shrinking by colliding with a Goomba.
(-2)	Player does not flicker after getting hit while big.	Ensure the player flickers after the shrinking animation.
(-2)	Mushroom flickering effect is incorrect or doesn’t despawn properly.	Test that the mushroom flickers over time, and ensure it disappears correctly.
(-2)	Player can still collect a despawned mushroom.	Stand in the path of a despawned mushroom and ensure it does not make the player grow.
(-X)	Other reason detailed in comments.
(-10)	N/A

⭐ Star

• Create a star entity with its own bouncing physics, see video for details.
• The star should bounce out of the block, and continue to bounce off the walls and ground until it hits the player or despawns.
• Implement sparkle animations that trail the player when they collect a star. The sparkles should appear randomly around the player’s location and leave a trail behind them.
• Start an invincibility timer for the player. If the player hits an enemy from any direction, the enemy should die. After the timer expires, regular collision rules are back in play.
• Add a lifetime and flicker-out effect for stars.
• Play sprout-item.wav when the star appears, invincible.mp3 when the player collects a star, and starman-low.wav when the player loses invincibility.
• Play stomp.wav when the player collides with an enemy while invincible.

Tips

• Create a new Star.js class.
• When parsing the map data in Map.js, if you see a star, instantiate a block object which contains a star at that location and keep an array of all stars in the map.
• When the player collides with a star, start a timer. When the player collides with an enemy during this timer, always kill the enemy.
• Update and render all stars on the map.
• Inside Player.js, check for collisions with stars and remove them from the map when the player collides with them.
• The sparkle animation sprites can be found in SpriteConfig.js.
• Set the context.globalAlpha to flicker out the star after a certain period of time. Make sure to reset it back to 1 after you’re done flickering or else it will affect other sprites.

Deduction	Criteria	Details
(-0)	Correct
(-2)	Star does not spawn or move correctly.	Ensure the star spawns from a block, bounces along the ground and walls, and moves with proper physics.
(-2)	Star does not interact with the player correctly.	Test collecting the star, ensure invincible.mp3 plays, verify the player sparkles and becomes invincible.
(-2)	Sound does not play after timer runs out.	Ensure that near the end/after invincibility wears off, starman-low.wav plays.
(-2)	Sparkles still spawn after timer runs out.	Ensure that after invincibility wears off, the sparkles stop spawning.
(-2)	Player still invincible after timer runs out.	Ensure that after invincibility wears off, that the player can die again from normal enemy collisions.
(-2)	Star flickering effect is incorrect or doesn’t despawn properly.	Test that the star flickers out over time, and ensure it disappears correctly.
(-2)	Player can still collect a despawned star.	Stand in the path of a despawned star and ensure it does not make the player invincible.
(-X)	Other reason detailed in comments.
(-10)	N/A

📝 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: A3 Mario 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.