This chapter is from the book
This chapter is from the book
This chapter is from the book
Game Play
Now that the game board is set up, we need to let the user click cards to try to find matches. We also need to keep track of play state, which in this case means whether the player is clicking the first card or second card, and whether all the cards have been found.
Adding Keyboard Listeners
The first step is to get each of the cards we create to respond to mouse clicks. We can do this by adding a listener to each of these objects. The addEventListener function will do this, and it takes two parameters: which event to listen for, and what function to call when the event occurs. Here is the line of code:
c.addEventListener(MouseEvent.CLICK,clickCard);
You also need to add another import statement at the start of the class to tell Flash you want to use events:
import flash.events.*;
The syntax for the event in this case is MouseEvent.CLICK, which is just a simple click on the card. When this happens, it should call the function clickCard, which we have yet to create. We need to create it before testing the movie again because Flash won't compile our movie with a loose end.
Here is a simple start to the clickCard function:
public function clickCard(event:MouseEvent) {
var thisCard:Card = (event.currentTarget as Card); // what card?
trace(thisCard.cardface);
}
Any time you have a function that responds to an event, it must take at least one parameter, the event itself. In this case, it is a value of type MouseEvent, which we will assign to the variable event.
In this case, the event parameter is key because we need to know which of the 36 cards the player clicked. The event parameter value is actually an object with all sorts of properties, but the only property we need to know about is which Card object was clicked. This would be the target, or more precisely, the currentTarget of the event.
However, the currentTarget is a vague object to the ActionScript engine at this point. Sure, it is a Card object. However, it is also a movie clip, which is a display object, too. We want to get its value as a Card object, so we define a variable as a Card, and then use a Card to specify that we want the value of event.currentTarget to be returned as a Card.
Now that we have a Card object in the variable thisCard, we can access its cardface property. We'll use trace to put it in the Output window and run a quick test of MatchingGame4.fla to make sure it is working.
Setting Up Game Logic
When a player clicks a card, we need to determine what steps to take based on their choice and the state of the game. There are three main states we need to deal with:
- State 1. No cards have been chosen, player selects first card in a potential match.
- State 2. One card has been chosen, player selects a second card. A comparison must be made and action taken based on whether there is a match.
- State 3. Two cards have been chosen, but no match was found. Leave those cards face up until a new card is chosen, and then turn them both over and reveal the new card.
Figures 3.6 through 3.8 show the three game states.
)
Figure 3.6 State 1, where the user is about to choose his or her first card.
)
Figure 3.7 State 2, where the user is about to choose his or her second card.
)
Figure 3.8 State 3, where a pair of cards was selected, but no match found. Now the user must choose another card to start a second pair.
Then, there are some other considerations. What if the player clicks a card, and then clicks the same card again. This means the player probably wants to take back the first choice, so we should turn that card over and return to the first state.
We can predict that we will need to keep track of which cards are chosen when the player is going for a match. So, we need to create our first class variables. We'll call them firstCard and secondCard. They will both be of type Card:
private var firstCard:Card; private var secondCard:Card;
Because we haven't set any values for these variables, they will both start off with the default object value of null. In fact, we'll use the null values of these two variables to determine the state.
If both firstCard and secondCard are null, we must be at the first state. The player is about to choose his first card.
If firstCard is not null, and secondCard is null, we are at the second state. The player will soon choose the card that he hopes matches the first.
If both firstCard and secondCard are not null, we are in the third state. We'll use the values of firstCard and secondCard to know which two cards to turn face down when the user chooses the next firstCard.
Let's have a look at the code:
public function clickCard(event:MouseEvent) {
var thisCard:Card = (event.target as Card); // what card?
if (firstCard == null) { // first card in a pair
firstCard = thisCard; // note it
firstCard.gotoAndStop(thisCard.cardface+2); // turn it over
So far, we can see what happens when the player clicks the first card. Notice that the gotoAndStop command is similar to the one we used to test the card shuffle earlier in the chapter. It must add 2 to the frame number so that the card values of 0 to 17 match up with the frame numbers of 2 to 19 that contain the 18 card faces.
Now that we have the value of firstCard set, we can expect the second click. This is handled by the next two parts of the if statement. This part handles the case of when the player clicks the first card again, and will turn it back over and set the value of firstCard back to null:
} else if (firstCard == thisCard) { // clicked first card again
firstCard.gotoAndStop(1); // turn back over
firstCard = null;
If the player clicks a different card for the second card, a comparison must be made between the two cards. We're not comparing the cards themselves, but the cardface property of the cards. If the faces are the same, a match has been found:
} else if (secondCard == null) { // second card in a pair
secondCard = thisCard; // note it
secondCard.gotoAndStop(thisCard.cardface+2); // turn it over
// compare two cards
if (firstCard.cardface == secondCard.cardface) {
If a match has been found, we want to remove the cards and reset the firstCard and secondCard variables: This is done by using the removeChild command, which is the opposite of addChild. It will take the object out of the display list and remove it from view. But they are still stored in variables in this case, so we must set those to null so the objects are disposed by the Flash player.
// remove a match
removeChild(firstCard);
removeChild(secondCard);
// reset selection
firstCard = null;
secondCard = null;
}
The next case is what happens if the player has selected a firstCard, but then selects a second card that doesn't match. And now goes on to click yet another card. This should turn over the first two cards back to their face-down position, which is frame 1 of the Card movie clip.
Immediately following that, it should set the firstCard to the new card, and show its picture:
} else { // starting to pick another pair
// reset previous pair
firstCard.gotoAndStop(1);
secondCard.gotoAndStop(1);
secondCard = null;
// select first card in next pair
firstCard = thisCard;
firstCard.gotoAndStop(thisCard.cardface+2);
}
}
That's actually it for the basic game. You can test out MatchingGame5.fla and MatchingGame5.as to play it. You can select pairs of cards and see matches removed from the board.
You can consider this a complete game. You could easily stick a picture behind the cards in the main movie timeline and have the reward for winning simply be the revelation of the full picture. As an extra add-on to a website, it will work fine. However, we can go much further and add more features.
Checking for Game Over
It is likely that you will want to check for a game over state so that you can reward players with a screen telling them that they have completed the game. The game over state will be achieved when all the cards have been removed.
There are many ways to do this. For instance, you could have a new variable where you keep track of the number of pairs found. Every time you find a pair, increase this value by one, and then check to see when it is equal to the total number of pairs.
Another method would be to check the numChildren property of the MatchingGame object. When you add 36 cards to it, numChildren will be 36. As pairs get removed, numChildren goes to zero. When it gets to zero, the game is over.
The problem with that method is that if you place more items on the stage, such as a background or title bar, they will also be counted in numChildren.
In this case, I like a variation on the first idea. Instead of counting the number of cards removed, count the number of cards shown. So, create a new class variable named cardsLeft:
private var cardsLeft:uint;
Then, set it to zero just before the for loops that create the cards. And, add one to this variable for every card created:
cardsLeft = 0;
for(var x:uint=0;x<boardWidth;x++) { // horizontal
for(var y:uint=0;y<boardHeight;y++) { // vertical
var c:Card = new Card(); // copy the movie clip
c.stop(); // stop on first frame
c.x = x*cardHorizontalSpacing+boardOffsetX; // set position
c.y = y*cardVerticalSpacing+boardOffsetY;
var r:uint = Math.floor(Math.random()*cardlist.length); // get a random face
c.cardface = cardlist[r]; // assign face to card
cardlist.splice(r,1); // remove face from list
c.addEventListener(MouseEvent.CLICK,clickCard); // have it listen for clicks
addChild(c); // show the card
cardsLeft++;
}
}
Then, in the clickCard function, we need to add new code when the user makes a match and the cards are removed from the screen: This goes in the clickCard function.
cardsLeft -= 2;
if (cardsLeft == 0) {
gotoAndStop("gameover");
}
That is all we needed for coding. Now, the game tracks the number of cards on the screen using the cardsLeft variable, and it will take an action when that number hits zero.
The action it takes is to jump to a new frame, like the one shown in Figure 3.9. If you look at the movie MatchingGame6.fla, you can see that I added a second frame. I also added stop(); commands to the first frame. This makes the movie stop on the first frame so that the user can play the game, instead of continuing on to the second frame. The second frame is labeled gameover and will be used when the cardsLeft property is zero.
)
Figure 3.9 The simplest gameover screen ever.
At this point, we want to remove any game elements created by the code. However, because the game only creates the 36 cards, and then all 36 are removed when the player finds all the matches, there are no extra items on the screen to remove. We can jump to the gameover frame without any items on the screen at all.
The gameover screen shows the words Game Over in the sample movie. You can add additional graphics or even animation here, too. Later in this chapter, we look at how to add a Play Again button to this frame.