Assignment 5: Angry Birds

• 💯 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 Angry Birds notes and source code.
• Implement 2 of the following: the Blue Bird, Yellow Bird, White Bird, or Black Bird.
• Implement additional game elements to make the game more interesting to play.

🔨 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.
4. Toggle the debug variable in globals.js to true to see the Matter.js body shapes.

🔍 Context

To complete this assignment, you should read and understand all of the Angry Birds 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 sixth assignment! This week, we took a look at the fundamentals of Matter.js, a fantastic 2D JavaScript physics engine, and how it ties into HTML5 canvas by implementing our own version of Angry Birds. This assignment will have you adding some more features to make our Angry Birds more fun and interesting to play!

✅ Pick 1/2 Easy Birds (20%)

Note

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

I’ve also included the sprite measurements since this particular spritesheet is a nightmare… You’re welcome 😉

💙 Blue Bird

When the Blue Bird is in flight and the player hits the spacebar, the bird should spawn 2 more copies of itself to rain down terror on the pig fortress.

Tip

The additional birds can be more instances of BlueBird. To get them to go in slightly different directions, use Body.applyForce(). See Bird::jump() for an example of how to use this function.

static SPRITE_MEASUREMENTS = [{ x: 1, y: 379, width: 32, height: 30 }];

Deduction	Criteria
(-0)	Correct
(-1)	No force is applied to the new birds.
(-1)	Other reason detailed in comments.
(-2)	N/A

💛 Yellow Bird

When the Yellow Bird is in flight and the player hits the spacebar, the bird should gain a burst of speed and accelerate more sharply towards the pig fortress.

Tip

Use Body.applyForce() for the burst of speed. See Bird::jump() for an example of how to use this function.

static SPRITE_MEASUREMENTS = [{ x: 668, y: 879, width: 58, height: 54 }];

Deduction	Criteria
(-0)	Correct
(-1)	Bird accelerates, but not towards the fortress.
(-1)	Other reason detailed in comments.
(-2)	N/A

✅ Pick 1/2 Hard Birds (40%)

🤍 White Bird

When the White Bird is in flight and the player hits the spacebar, the bird should lay an egg that can act as a projectile to damage pigs and blocks. The act of laying the egg should propel the bird upwards. The bird itself should become a shrivelled version of itself (i.e. smaller sprite and radius) after the egg has been laid. The shrivelled version of the bird can still damage pigs/blocks. The bird should also play an egg-laying animation. It’s hard to see because it’s fast in the gif, but it’s there if you look closely:

Tip

The egg will be an entity just like everything else. Use Body.applyForce() for propelling the bird upwards. See Bird::jump() for an example of how to use this function.

To lay the egg after the animation, remember that Animation::isDone() is a thing!

static SPRITE_MEASUREMENTS = [
    { x: 410, y: 542, width: 80, height: 93 },
    { x: 410, y: 353, width: 80, height: 93 },
    { x: 410, y: 448, width: 80, height: 93 },
    { x: 493, y: 353, width: 85, height: 93 },
    { x: 667, y: 752, width: 50, height: 65 },
    { x: 668, y: 820, width: 45, height: 57 },
];

Deduction	Criteria
(-0)	Correct
(-1)	Bird is not propelled upwards when spacebar is pressed.
(-1)	Egg is not laid when spacebar is pressed.
(-1)	No animation was played.
(-1)	Bird’s sprite does not change after shrivelling up.
(-1)	Bird’s hitbox does not shrink after shrivelling up.
(-X)	Other reason detailed in comments.
(-4)	N/A

🖤 Black Bird

When the Black Bird lands on the ground an comes to a complete stop, the bird should explode causing a shockwave to push/damage the blocks and pigs. The bird should also play a charging-up animation before it explodes:

Tip

Create lots of small Matter bodies (i.e. shrapnel) and send them every which way around the bird (again, using Body.applyForce()) to make it look like there’s a shockwave. These small, dense bodies will then interact with any surrounding bodies and push them away and damage them.

To explode after the animation, remember that Animation::isDone() is a thing!

static SPRITE_MEASUREMENTS = [
    { x: 410, y: 725, width: 62, height: 82 },
    { x: 778, y: 446, width: 62, height: 82 },
    { x: 715, y: 446, width: 62, height: 82 },
    { x: 588, y: 446, width: 62, height: 82 },
    { x: 651, y: 446, width: 62, height: 82 },
    { x: 673, y: 353, width: 90, height: 90 },
];

Deduction	Criteria
(-0)	Correct
(-1)	No animation was played.
(-1)	Bird does not cause a shockwave to other entities upon explosion.
(-1)	Any extra Matter bodies get cleaned up properly i.e. the “bodies” count on the screen makes sense and there are not extra invisible bodies hanging around well after the explosion.
(-X)	Other reason detailed in comments.
(-4)	N/A

✅ Pick 2/4 Features (30%)

💥 Explosions

You can see from the gifs above that the blocks are playing a little explosion animation when they are destroyed.

static SPRITE_MEASUREMENTS = [
    { x: 169, y: 513, width: 115, height: 111 },
    { x: 169, y: 400, width: 113, height: 110 },
    { x: 169, y: 277, width: 126, height: 122 },
    { x: 169, y: 155, width: 126, height: 122 },
];

Tip

Use the Animation library!

Deduction	Criteria
(-0)	Correct
(-1)	An explosion sprite appears, but it’s not an actual animation.
(-1)	Other reason detailed in comments.
(-2)	N/A

🪞 Glass Blocks

Glass blocks should break much easier than wood blocks. In the example below, the bird is being dropped from a much lower height over the glass block to get it to break versus the wood block:

static SPRITE_MEASUREMENTS = {
  [Size.Small]: { x: 390, y: 0, width: 35, height: 70 },
  [Size.Medium]: { x: 355, y: 105, width: 35, height: 110 },
  [Size.Large]: { x: 390, y: 70, width: 35, height: 220 },
};

Tip

Play with the density property!

You should be able to test this just by manually dropping a bird or pig onto the different blocks like in the GIF in the README.

Deduction	Criteria
(-0)	Correct
(-1)	Glass block sprites are used, but are not easier to break.
(-1)	Other reason detailed in comments.
(-2)	N/A

🥊 Resilient Enemies

Pigs should be able to take multiple hits before dying. The visual indication of this is using the black-eye sprites:

static SPRITE_MEASUREMENTS = [
    { x: 987, y: 744, width: 48, height: 46 },
    { x: 733, y: 904, width: 48, height: 46 },
    { x: 733, y: 856, width: 48, height: 46 },
];

Tip

Implement some sort of health property on Pig that gets decremented when the pig gets hit by a bird or block in Fortress. Then, render the appropriate sprite.

You should be able to test this just by manually dropping a bird or block onto a pig.

Deduction	Criteria
(-0)	Correct
(-1)	Other reason detailed in comments.
(-2)	N/A

⭐ Stars

Award the player a maximum of 3 stars on the Victory screen based on how many moves it took to clear the pigs from the level. As a simple example, if you give the player 3 birds to complete a level and they manage to defeat all the pigs using just one bird, then the player would get 3 stars. If they had to use all 3 birds to win, then they would only get 1 star. It’s up to you to fine tune the values you think are appropriate to award the player a fair number of stars based on the level parameters.

There are 2 sprites you should use to implement this. The star itself and the star placeholder. The placeholder should always appear, and the actual star sprites should be “filled in” based on how many stars the player was awarded. You’ll find both sprites in the assets/ folder as usual.

Generally speaking, using one bird to clear the level should be 3 stars, using all birds to clear the level should be 0-1 stars.

Deduction	Criteria
(-0)	Correct
(-1)	Other reason detailed in comments.
(-2)	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: A5 Angry Birds 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.