Games Assignment 6: Improved Match Three

Due Friday, March 19

In this assignment, you'll take the Match Three code from Rosenzweig (available here for owners of the book as A3GPU08_MatchThree.zip) and make it a little more interesting. Each gem destroyed will provide some ``mana'' of its color that fills a bar. When a bar is filled, the player will be able to click on it to use the power associated with that color, draining the bar and making it empty again. Here is a sample solution.

You can pick your own powers to implement, but here are some suggestions that are straightforward to implement:

• Destroy all pieces of a certain color: After clicking on the bar, the player is prompted with a text message to click on a piece to destroy all pieces of that color.
• Get mana: After clicking on the bar, the player is instructed to click on a different bar to fill that mana bar.
• Destroy row: After clicking on the bar, the player is instructed to select a row to destroy. Clicking on a piece then destroys all gems in that row.
• Destroy column: Similar to destroy row.
• Set gem type: The next ten gems to enter the board will all be of the same color.

There are five distinct colors, since there are two gem types that are both green and two that are both blue. (Since these colors are twice as common, you might want to assign weaker powers to them.)

Unlike the shootorial, this game uses multiple screens on the main timeline -- one for the intro, one for the game, and one for a game over. The second Flash screen, the one in which the game is played, will look almost blank when you start, but will look like this in the Flash stage editor once you're done:

Notice the black mana bar at the bottom right. To make the game harder, you'll change the game so that an extra gem type, the black gem, starts appearing as often as the other gem types once the player's score reaches a certain threshold. If the black mana bar is ever filled, the game is over.

You can do all this by following these steps:

1. Draw the bars on the second frame of the main timeline. Convert each bar to its own symbol. Be sure to change the registration point to the bottom, so that they scale from the bottom as they change size. Add a dynamic text field to the bottom of the screen, for displaying messages. The full bars should now appear as you're playing the game. Give each bar an instance name in the Properties window, so that you'll be able to refer to it as MovieClip(root).manaBar1, for example.
2. Factor the piece removal part of findAndRemoveMatches() into its own function, removePieces(), which works on an array of arrays of pieces. findAndRemoveMatches will then just consist of a call to lookForMatches(), followed by calling removePieces() on the result. You'll find this factoring useful later so that you can remove pieces for reasons other than matches, such as your special powers; when you want to remove a bunch of pieces, stuff each one into its own array, and push all these one-piece arrays into an array you can call removePieces() on.
3. Introduce an array of integers called ``mana'', and write a function addMana() that takes a piece as its argument, switches on piece.type, and increases the appropriate mana variable. At this point, you'll probably find it useful to define constants for the colors -- BLUE, BLACK, etc -- so that you can index the mana array by color name. Call addMana() in removePieces whenever a piece would be removed. At this point, you should be able to trace() to see the different mana totals.
4. Write a function updateManaBars(), called from removePieces() and to set up in startMatchThree(), that sets the bar heights appropriately using scaleY. You'll have less repetitive code in the long run if you push() the manaBars into an array that you can index by color constant. Put limits on the mana in addMana() so that the bars don't overfill. At the end of this step, the bars should fill as you make matches.
5. Also in startMatchThree(), add mouse click listeners for each mana bar. The only thing they should do now is become empty if they're full, and otherwise do nothing. Remove the listeners in endGame(), so that you don't create multiple listeners accidentally when the player restarts.
6. Now, start implementing the special powers within the mana bar mouse click listeners. Several of the suggested listeners involve clicking on something after having clicked on the bar; you can do this by having the listener set a clickMode variable, and in clickPiece(), do something besides swap a piece if the mode is RED_POWER instead of SWAP_PIECES, say. Otherwise, the implementation of the different powers is left to you. You should put a message in the dynamic text field when a power is activated, telling the player what it's doing. For debugging purposes (yours and mine), start the game with full gauges. By the end of this step, you should have workable powers for each of 5 colors.
   • Hint: To remove a full row or column, push each piece of the row or column into an array, push each single-piece array into another array, then call removePieces() on the array you've made. You can do something similar to remove all pieces of a particular color. You could also do this with a single-dimensional array, but it requires a little more modification of the underlying code.
7. To addMana(), add a check for whether the mana gauge being updated is full. If it is, change the text in the dynamic text field to encourage the player to click on a bar.
8. In the color layer of the Piece library element, you'll notice that this is where the different piece graphics are. Use Insert-Timeline-Keyframe to dd another frame, and draw a black jewel (it can just be a black circle). Change addPiece() so that black gems now fall.
9. In addMana, call endGame() if the black mana is full.
10. Finally, change the game so that the black gems only begin to appear after the score reaches a certain point ... say, 20000.
11. Adding music is optional but encouraged.

    Since the Flash files last time were ginormous, this time there will be a Drop conference, accessible from within the CS349 conference. Zip your code and send it there.

    Note that the "Arial bold" font used by Rosenzweig for PointBursts may not exist on your computer, preventing the PointBursts from appearing. Double-click on the "Arial" library element and change the style to "Regular" if you don't see point bursts, and that will probably make them appear.

    Have fun!