Assignment 2: Match 3

• 💯 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 Match 3 notes and source code.
• Implement time addition on matches such that scoring rewards the player by extending the time they have to complete the level.
• Gradually add new patterned tiles as the player progresses through the levels. Tiles of a higher pattern should be worth more points.
• The star tile should be a very rare tile that will destroy an entire row on match, granting points for each tile in the row.
• Only allow swapping when it results in a match.
• Implement a “hint” feature such that when the player presses h, it will reveal a pair of tiles that can be swapped to create a match.
• Allow the player to play with their mouse instead of the keyboard.

🔨 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 classes:

• Tweening: Understanding how to smoothly animate objects on the screen within a given timeframe.
• Timer: Understanding how to create a timer that can be used to track time.
• Input: Understanding how to handle user input via the keyboard or mouse.
• Sounds: Understanding how to load and play sounds.
• Fonts: Understanding how to use load and display fonts.
• Image: Understanding how to load and display images.

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 third assignment! There was a lot to learn with timers & tweens, but our game is still lacking in a few areas. By extending its functionality, we’ll have something even closer to famous titles such as Bejeweled and Candy Crush!

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

Implement two of the four following features:

1. ⏰ Implement time addition on matches, such that scoring a match extends the timer. You decide how much time is appropriate to reward the player with on each match.

   Tip

   Currently, there’s code that calculates the amount of points you’ll want to award the player when it calculates any matches in PlayState::calculateMatches(), so start there.

2. 🌈 Ensure level 1 starts just with simple flat tiles (the first of each colour in the sprite sheet), with later levels generating the tiles with patterns, one new pattern per level. These should be worth more points, at your discretion.

   • Level 1: Flat, Star (See star tile in next section)
   • Level 2: Flat, Cross, Star
   • Level 3: Flat, Cross, Circle, Star
   • So on and so forth.
   • To detect a match, you’ll still only have to check the colour of the tile; the patterned tiles only change the amount of points gained.
   • For example, a flat tile (🟩) could be worth 10 points and a cross tile (❎) could be worth 20. A match that was 🟩❎🟩 (all the same colour of course) would be worth 40 points.
   • Patterned tiles should spawn just like flat tiles as the game is played. Meaning, don’t only generate patterned tiles at the start of the level.

   Tip

   Right now, colours and patterns are chosen in Board::generateTile(). One idea could be to pass in the level variable when a Board is created, and let that influence what pattern is chosen for the given level.

3. 🚫 Only allow swapping when it results in a match. They way you let the player know it’s an invalid move is up to you, but you should have both a visual and audio cue.

   Tip

   The simplest way is probably just to try and test if there was a match after a swap and revert back if there was no match. Look in /assets/sounds for a sound that you can play when the player tries to make an invalid move. You can use your own sound if you’d like.

4. 🐭 Allow the player to play with their mouse instead of the keyboard.

   • When the player moves their mouse over the board, the tile underneath the mouse should be outlined, the same as when the players presses w/a/s/d.
   • When the player clicks on a tile, the tile should be selected, the same as when the player presses the Enter key.
   • This feature can be see in the star tile demo video below.

   Tip

   Use the Input class’s mouse methods to get where the mouse position is, if the mouse was clicked, and use that information to highlight and select tiles.

Implement both of the following features:

1. ⭐ The star tile (the last of each colour in the sprite sheet) should be a rare tile that will destroy an entire row or column on a match (depending on the match direction), granting points for each tile in the row or column.

   • For example, if you have a match in a column of 3 orange tiles, one of the tiles in the match being an orange star tile, then that entire column should be removed and points should be awarded for every tile in that column, regardless of if they’re orange or not.
   • Take care to make sure the points are being added up correctly and that no tile is being counted multiple times.
   • No, you do not need a fancy animation for the star tile, but you can if you’d like.
   • Star tiles should spawn just like other tiles as the game is played. Meaning, don’t only generate star tiles at the start of the level.
   • You’ll notice in the video below that clearing a row with the star tile is 65 points. This is because the star tile is worth 30 points and the rest of the flat tiles are 5 each, so 30 + 5 * 7 = 65.

   Tip

   First, think about how to generate the star tiles such that they show up on every level but are rare. Second, you’ll have to detect that a match contains a star tile when running Board::calculateMatches() and remove the entire row or column.

2. ❓ Show the player a hint when they press the h key. A hint is showing the player 2 tiles they can swap which will result in a match. The way you display the hint is up to you; it can be a simple rectangle or a fancy animation using timers and tweens.

   Tip

   One way to do this is to loop through the board, do a temporary swap in memory (i.e. not visually), check if that resulted in a match, then revert the swap.

🌿 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/Tile.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: A2 Match 3 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.
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.