Assignment 1: Breakout

• 💯 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 Breakout notes and source code.
• Add a multi-ball power-up to the game that spawns two extra balls.
• Grow and shrink the paddle when the player gains enough points or loses a life.
• Add a locked brick that will only open when the player collects a key power-up.
  • The key should only spawn when a locked brick exists.

🔨 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

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

• States: Understanding how to transition between different states in the game.
• Sprites: How to load and render sprites on the screen.
• Collision Detection: Detecting when two objects collide with each other.

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 second assignment! By now, we’ve gotten our feet wet with states, randomization, and much more; this time, we’ll be diving in further and adding some new features. Your task is to implement two of the three following features:

1. Grow and shrink the paddle when the player gains enough points or loses a life, respectively.
2. Add a multi-ball power-up to the game that spawns two extra balls.
3. Add a locked brick that will only open when the player collects a key power-up. The key should only spawn when a locked brick exists.

🚦 Let’s Go

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.

💗 Paddle Size

Grow and shrink the paddle such that it’s no longer just one fixed size for the entire game.

Note

The bar on the right in the video is only for demonstration purposes and is not part of the assignment. It fills up as the player gains points and hits the 100% mark when the player reaches the next paddle size.

1. The paddle should shrink (no smaller than the smallest paddle sprite) if the player loses a life.

2. The paddle should grow (no larger than the largest paddle sprite) if the player exceeds a certain amount of score.

   1. The paddle should grow from size 0 to size 1 after the player accumulates 50 points.
   2. The paddle should grow from size 1 to size 2 after the player accumulates 100 points.
   3. The paddle should grow from size 2 to size 3 after the player accumulates 200 points.

3. Here’s how it should work:

   // Paddle Size 0 -> 1: +50 points
   // Paddle Size 1 -> 2: +100 points
   // Paddle Size 2 -> 3: +200 points
   Paddle = 1;
   Life = 3;
   Score = 0; // Game start
   
   Paddle = 2;
   Life = 3;
   Score = 100; // Score +100, paddle size 1 -> 2
   
   Paddle = 1;
   Life = 2;
   Score = 100; // Life -1,    paddle size 2 -> 1
   
   Paddle = 0;
   Life = 1;
   Score = 100; // Life -1,    paddle size 1 -> 0
   
   Paddle = 1;
   Life = 1;
   Score = 150; // Score +50,  paddle size 0 -> 1
   
   Paddle = 2;
   Life = 1;
   Score = 250; // Score +100, paddle size 1 -> 2
   
   Paddle = 3;
   Life = 1;
   Score = 450; // Score +200, paddle size 2 -> 3

🤹🏽‍♀️ Multi-Ball

Add a multi-ball PowerUp class to the game that spawns a power-up (sprites located at the bottom of the sprite sheet).

1. This should spawn randomly at the location of the brick when the ball hits a brick, and should gradually descend down the screen so that the player can “pick it up” with the paddle.
   • It’ll be up to you to decide whether more than one power-up can be on the screen at any given time, or whether the player should be allowed to “stack” multiple power-ups.
2. If the power-up collides with the paddle, the power-up should despawn and two more balls should spawn (at whatever location you choose) and behave identically to the original, including all collision detection and scoring points.
3. You should only lose a life and transition to the ServeState when the last of the balls falls below the screen.
   • Once the last ball falls, reset the number of balls back to 1 and number of power-ups back to 0.
4. Once the player wins and proceeds to the VictoryState for their current level, reset the number of balls back to 1 for the new level.

🔐 Locked Brick

Add a locked brick (located in the sprite sheet) to the level spawning, as well as a key power-up (also in the sprite sheet).

1. The locked brick should not be breakable by the ball normally, unless the player obtained the key power-up.
2. The key power-up should spawn randomly (just like the multi-ball power-up) when hitting a brick and descend toward the bottom of the screen where the paddle can collide with it and pick it up.
   • No keys should spawn if there are no locked bricks in play.
3. You’ll need to take a look at the LevelMaker class to see how you can implement the locked brick into the level generation.
   • To make it easier to test, ensure that every level has at least 1 locked brick.
4. There is a chance for the player to get “soft locked” meaning that it’s possible to have a scenario where the player breaks all the regular bricks and now there are only locked bricks left. Since keys can only spawn from regular bricks, the player is now stuck. For this assignment, this is okay, you do not have to account for this edge case. However, if you like an extra challenge, try implementing your own solution for this soft lock!

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

🖱️ GUI

1. In VSC, click on the third icon down in the left navigation bar to see a list of files that have changed and are ready to be staged.
2. Hover over where it says Changes (right below the commit textbox) and click + to stage all the modified files to be committed. Alternatively, you can add specific files by clicking the + next to the individual file.
3. Type a commit message into the textbox and click the checkmark above it to commit all the files that were just staged.
4. Click ... and then push to push the commit(s) up to GitHub.

⌨️ CLI

1. Run git status to see a list of files that have changed and are ready to be staged.
2. Run git add . to stage all the modified files to be committed. Alternatively, you can add specific files like this: git add src/Paddle.js.
3. Run git commit -m "A descriptive message here." (including the quotes) to commit all the files that were just staged.
4. Run git push to push the commit(s) up to GitHub.

Regardless of the method you choose, it is very important that you commit frequently because:

• If you end up breaking your code, it is easy to revert back to a previous commit and start over.
• It provides a useful log of your work so that you (and your teammates if/when you’re on a team) can keep track of the work that was done.

📥 Submission

💡 Note that the grading criteria can be found on Gradescope, but only after you’ve submitted. You’re able to submit infinitely, so it’s be a good idea to submit a blank repo first in order to reference the grading criteria while working on this assignment.

Once you’ve made your final git push to GitHub, here’s what you have to do to 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. Click the blue Add Submission button at the top of this page.
   1. Title: A1 Breakout 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. If you want to remain anonymous, ensure the zip file doesn’t contain your name, and also make sure to not include the .git folder before zipping. Note that if your name is in the name of the folder, the people evaluating you will see that it’s your submission. So, rename the folder if that is of concern for you.
3. Click the Save changes button at the bottom.
4. You’ll be able to start assessing your peers the day after the assignment is due.