Developing Applications For iOS – Assignment 1: Matchismo
By the end of the third lecture of Coding Together: Developing Apps for iPhone and iPad (Winter 2013) Paul Hegarty has demonstrated the implementation of the basic logic for a simple 2-card matching game in Matchismo, opening the door for the first formal course homework.
Assignment 1: Matchismo requires adding both code to the application to handle a total of 16 play cards and new user interface components. The modified UI must include a new game play message label and a new button to let the player re-deal all of the game cards. In addition to these, a switch control must be added to let the player select between a 2-card and a 3-card matching game. Lastly, the back of the cards has to be changed to use an image instead of the Apple logo character.
This assignment also has an optional requirement that asks for a slider UI control to be added to let the player navigate through the history of play messages related to the current game.
Solution
In this version of Matchismo the game starts with 16 cards upside-down randomly selected from a deck of 52 regular playing cards. Pressing a card selects and flips it up. There is a small score penalty each time a card is flipped-up. When the game is played in 2-card match mode, two selected cards are matched based on rank and suit. A rank match scores higher than a suit match, and a no-match incurs a score penalty. Only matched cards become unplayable. At the top of the display there are both a flip counter and a game score. At the bottom of the display there is a game play message area as well as a control to scrub through the game messages, a game mode selector, and a button to start a new game by re-dealing a new set of cards from a new card deck.
Implementation Notes
My version of Matchismo for this assignment implements the specifications of all required tasks including the flip, match, and no-match messages to use. It also uses a UISegmentedControl as the game mode selector, although it is not the prettiest control for this. The application disables the game type selector at the start of a game as required too. The “Deal” button is pretty much straight forward and simply triggers the instantiation of a new game object and resets the UI.
I made the card buttons custom instead of rounded to better display the rectangular image I chose to use for the back of the cards. I also used an additional rectangular image for the background of the front of the cards. The card back image is part of the free vector playing card deck by Charles Esquiaqui on snap2objects.
To support the 3-card match mode, I modified the CardMatchingGame class to support an arbitrary number of game card matches to use per game. I tweaked the matching logic to calculate the matching score based on the cumulative match results of each pair of cards in a given set. This scoring mechanism may not be optimal but it is reasonable and keeps things simple.
Integrating the slider control to navigate game messages was pretty fun to do. I added some simple logic to the slider to make it step when it is being interacted with based on the number of messages recorded at any given time. The slider also animates smoothly “to the present” when a new flip happens. I decided to add the collection of play messages to CardMatchingGame because the messages not only are produced by this class but also make up the history of a specific game. This would permit, for example, saving and loading a game’s history together with its score.
Source Code
The full Xcode project with my solution to Assignment 1 is available here.
Thanks for this. I’m currently working on the current assignments, which is similar to the assignments you have. I’ve, however, found that when I re-deal and then draw a card, there is a delay in the card contents showing, i.e. card flips but is white, then the rank/suit show fade in a bit later. I’m not sure where the bug is in my code. Do you have any thoughts/suggestions?
How do you change the suit color? mine are only coming up black. Thanks for the help!
Everything else seems to work but the suits just remain the same. Just a simple explanation would do!
Hi there
Thanks for sharing the assignment.
I would like to seek your advise on how did you turn the suit @”♦︎”,@”♥︎” into red colour?
I stuck on it for days 🙁
Thank you
Someone answer Bryan!!!!
For those who had difficultly getting the colors of the suits correct, I wrote a blog post with the solution http://patrickperey.com/cs139p-red-and-black-playing-card-suits/