Developing An Application In Flash And AS3 Part Two
To catch up on this ongoing project read this article: Developing An Application Using Flash and Action Script 3.
Now I have a pretty reasonable grasp of the basics of ActionScript 3 and its object nature the next step has been to take a step back and write down the plan for the project in order to frame the scope– remember this is going to be a simple pair matching game.
- Pairs use a grid of 10 pairs of cards (20 cards in total) arranged in a 5×4 grid.
- At the start of the round the cards are randomly shuffled and the timer starts counting in seconds.
- Player clicks one card which flips over to reveal its face, the player then clicks another (different) card which flips over to reveal its face.
- If the two cards are the same the pairs are removed. If there are no more pairs the timer is stopped, the game is over and the final time is presented to the player.
- If the two cards are different they are returned to their face down position after a short time (a few seconds for the player to remember them).
- Add a front information screen prior to the game starting and hook this into a menu button on the game.
Project Wish List
With many projects it can be tempting to start adding cool new features before the primary development is complete. To provide a forum for these ideas but frame them outside the primary development cycle I am employing a Wish List – anything interesting but not essential is included on the Wish List:
- Animate the cards flipping over
- Play an animation when two matching cards are found
- If the player clicks on another card whilst two cards are face up they are immediately returned to their face down position
- Add a pause facility which will stop the timer, return cards to their face down position and disable flipping cards until the game is un-paused.
- Count the number of times the player flips cards.
- Add a score to count the number of successful flips.
- If add a score add a combo for successive matches in a row
- Add a game over element if too many flips are made or if the timer reaches a certain time
- Add a scoreboard feature to record the time and number of flips
- Keep an ongoing record of the players best time and number of flips – perhaps using a cookie?
- Add a high score table
- If add a high score, allow user to enter their name
- Add a title screen
- Add a high score screen
During development a number of questions may be posed which require further discussion – these questions, so far, are included in this sections.
- Best practice question: Would it be better to place an EventListener on the Engine Class or on each card instance?
- What object deconstruction and garbage collection is required
Progress So Far
This section aims to provide an update to the development so far. The next step in the project has been to provide some simple pairs of cards together with their backs. Initially only the backs will be shown in the game but for now I will show them face up (to make development simpler). The current cards are pairs of simple black rectangles with the numbers 1 to 10 – you can see them in the image lined up (they have not been randomly organised yet).
You can also see I have added a Timer and a Menu button. The button does nothing so far however the timer increases approximately once per second.
Once I got the cards placed into an Array it was a case of creating a new empty Array then cycling round the original array twenty times, choosing a random position and adding that to the new array (then reducing the size of the original Array). Finally the the new array is copied over into the game array and we have a fairly random distribution of card pairs.
That done it was time to place the cards face down. All the cards are defined in a single symbol with 11 frames. The first frame is the back card and the next 10 are the game cards. All I need to do is set the draw routine to show the first frame for each card and we have the backs as shown in the next diagram. Be amazed at the current card design – I know what your thinking – simple yet effective
The last step for now is to add the logic so when the player click on a card it flips over to reveal its face. This was done by adding a mouse event listener to the card which turns the card and despatches an event to its parent to let it know what has happened. Now we have the beginnings of a game.
The next step will be to record the turned card in the parent class and perform some action upon the second card turn to establish:
- Has the player clicked on the same card
- If so, reset the card to be face down
- Has the player clicked on a different card
- If so, do the two cards match? If Yes, remove them and If No, reset them both face down.
That’s it for now, hopefully next time we can start including some analysis of the code so far and an outline of the various classes which have been created.