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

• 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. Follow the environment setup instructions if you haven’t already done so from a previous assignment.
3. 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 Match-3 tutorial lessons, and be familiar with the following concepts and references:

• 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.
• Game: Understanding the shared services object and the frame update/render pipeline.
• State Machine: Understanding how the game selects, updates, and renders one active state.
• State: Understanding state lifecycle methods and how states receive shared services and transition data.

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!

✅ Requirements

Don’t just go off of the videos!

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.

Note

Implement 2 features worth 15%, and both features worth 30%.

⏰ Time Addition (15%)

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.

Deduction	Criteria	Details
(-0)	Correct	Confirm that time is only awarded when a valid swap is made.
(-2)	Time is awarded to the player even on an invalid swap.	Make an invalid swap and verify that no additional time is given.
(-1)	Time is awarded inconsistently.	Perform multiple valid swaps and check that the time added is consistent each time.
(-X)	Other reason detailed in comments.
(-4)	N/A

🌈 Patterned Tiles (15%)

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.

Deduction	Criteria	Details
(-0)	Correct	Ensure that only flat tiles are present on level one, and that more complex tiles (cross, circle) appear in later levels.
(-2)	Level one started with more than just the flat tiles.	Test the game from the beginning and confirm that level one contains only flat tiles.
(-1)	Patterned tiles are not increasingly worth more than previous tiles.	Verify that tile values increase with complexity: flat < cross < circle, etc. Check the scoring system after matches. This one might be easier to check the code than to play multiple levels.
(-X)	Other reason detailed in comments.
(-4)	N/A

🚫 Disallow No-Match Swaps (15%)

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.

Deduction	Criteria	Details
(-0)	Correct	Try to swap two tiles that do not create a match and confirm the game does not allow the swap.
(-4)	Player is able to make invalid swaps.	Test multiple invalid swaps and ensure none are accepted.
(-2)	No audio or visual feedback is given when attempting an invalid swap.	Check if there is any sound or visual cue (e.g., shaking tiles) when attempting an invalid swap.
(-X)	Other reason detailed in comments.
(-4)	N/A

🐭 Mouse Input (15%)

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.

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.

Deduction	Criteria	Details
(-0)	Correct	Move the mouse over the board and confirm that the correct tile is selected on click.
(-2)	The board cursor does not follow the mouse position.	Move the mouse over the board and ensure the cursor aligns with the correct tile.
(-2)	The tile underneath the mouse is not selected when the mouse is pressed.	Click on a tile and confirm that the correct tile is highlighted or selected.
(-X)	Other reason detailed in comments.
(-4)	N/A

⭐ Star Tile (30%)

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.
• There should be an audio and visual cue when the row/column gets destroyed. The audio can be the provided laser.wav sound effect or your own custom sound you choose to add. I chose to visually represent the star blast as a white rectangle whose opacity value gets tweened from 0 -> 1 -> 0 very quickly to resemble a laser flash. You can copy this, or get creative and think of your own animation. Whatever you decide to do, it must involve a tween of some sort.
• 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.

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.

Deduction	Criteria	Details
(-0)	Correct	Test a match that includes a star tile to confirm the entire row/column is removed.
(-3)	When a horizontal match contains a star tile, the whole row is not removed.	Create a horizontal match with a star tile and ensure the whole row is removed.
(-3)	When a vertical match contains a star tile, the whole column is not removed.	Create a vertical match with a star tile and ensure the whole column is removed.
(-2)	No audio cue plays for a star blast.	Trigger a star blast and confirm that a sound effect plays.
(-2)	No tweened visual cue appears for a star blast.	Trigger a star blast and confirm that a tweened visual effect is shown.
(-X)	Other reason detailed in comments.
(-10)	N/A

❓ Show Hint (30%)

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, however, it must be animated using timers and/or tweens. Like with the star blast, you can either copy what I’ve done below (i.e. pulsing white rectangle outline) or come up with your own creative indicator.

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.

Deduction	Criteria	Details
(-0)	Correct	Verify that hints are working and displayed correctly in the UI.
(-1)	The number of available hints is not displayed in the UI.	Check if the remaining hint count is visible and updated when hints are used.
(-1)	The player can use an unlimited number of hints per level.	Ensure that there is a limit to how many hints can be used per level.
(-4)	When the player presses ‘h’, there is no animated visual indication that reveals two tiles that can be swapped for a match.	Press ‘h’ and confirm that two swapable tiles are visually indicated and animated with timers and/or tweens.
(-X)	Other reason detailed in comments.
(-6)	N/A

📝 Assignment Policies (10%)

Read the assignment policies and make sure you include a proper .devlog.md file (5%). There will be a peer evaluation component (5%) to this assignment as well as a chance to be randomly selected to do a code walkthrough at my discretion.

📥 Submission

1. Inside README.md, write the features you chose to implement, known bugs to look out for, anything you want your peer evaluators to know, then do your final git push to GitHub.

   Danger

   Go to your assignment repo in GitHub and double-check the deployment action was successful. If you see a ❌ next to where it shows your latest commit:

   1. Go up to Actions
   2. Click the title of the latest workflow (top entry of the table)
   3. Click Re-run jobs > Re-run all jobs

   Verify that it’s now ✅

2. Go to Gradescope, click the link for this assignment, select the correct repository and branch from the dropdown menus, and click Upload.

3. Assess your peers starting the day after the three day late submission deadline.