Concentration (Shinkei-suijaku) Game
Concentration, also known as Shinkei-suijaku, Memory, Pelmanism, Pexeso or simply Pairs, is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards. Concentration can be played with any number of players or as solitaire and is an especially good game for young children, though adults may find it challenging and stimulating as well. The scheme is often used in quiz shows and can be employed as an educational game.
In Japan it is called Shinkei-suijaku. In Britain it is called Pelmanism after Christopher Louis Pelman, who founded the "Pelman Institute for the Scientific Development of Mind, Memory and Personality" in London in 1899.
Rules
Any deck of playing cards may be used, although there are special cards available. The rules given here are for a standard deck of 52 cards, which are normally laid face down in 4 rows of 13 cards each. The two jokers may be included for a total of 6 rows of 9 cards each.
In turn each player chooses two cards and turns them face up. If they are of the same rank and colour' (e.g. 6 of hearts and 6 of diamonds, queen of clubs and queen of spades, or both jokers, if used) then that player wins the pair and plays again. If they are not of the same rank and colour, they are turned face down again and play passes to the player on the left. The game ends when the last pair has been picked up. The winner is the person with the most pairs, and there may be a tie for first place.
Over the course of the game, it becomes known where certain cards are located, and so upon turning up one card players with good memory
Functionality of the Program
In this assignment, you are going to develop a concentration game that can be played solo against the clock. In the game, the player is given 60 seconds. Each time the player chooses two cards. The cards will stay if they are matching pairs of the same rank, ignoring colours. Otherwise, they will flip over back to face-down. The result is calculated by the number of matching pairs the user found in 60 seconds.
Figure 2 is an illustration of the game in play. As you may see, the Concentration game has three control buttons:
• Stop Game: stops an ongoing game;
• Flip Cards: flips all cards over to face-down except from those found paired cards;
• Show Cards: shows all cards to face-up.
In the title a timer is set, counting down in second from 60 to 0. The game will automatically stop when the time is up, and then an alert window will pop up presenting the gaming result, such as how many pairs the player has found and the list of cards in ascending order based on their ranks from Ace, 2, 3, . . ., 10, Jack, Queen, to King. Each card should be represented by the format of suit - rank, for example, "Diamond-10" and "Spades-Jack". An illustration of the pop-up alert window showing gaming result is in Fig. 3.
Download the template file and card images HERE and start your work on them. Note that you need to put the program (.html file) and card images in the same folder in order to make it working.
Requirement Specification and Mark Distribution
You should use Table 1 as the checklist for implementation and to guide your testing of the program. The total 40 marks will then be converted to 20, which is the final grade Assignment III carries.
Table 1 Functional Requirements
Clicking "Show Cards" button will show up all cards
- Clicking "Show Cards" button will make all cards to turn face-up
- When clicking "Show Cards" cards are showing face-up one by one (animation effect) Clicking "Flip Cards" button will turn all cards, except from those found paired, face-down
- Clicking "Flip Cards" button will make face-up cards face-down
- When click "Flip Cards" the paired cards will stay face-up
- When click "Flip Cards" cards are turning face-down one-by-one (animation effect)
Click "Show Cards" or "Flip Cards" shouldn't affect an ongoing game, nor change the cards' order The timer ticks down from 60 seconds when a game is loaded, and the game will be terminated
when the time runs off
- Timer ticks down second by second (animation effect)
- When 60 seconds runs off, the game stops
- No concurrent threads (timer) is allowed. The timer is cleared out when a game is terminated. Starting a game
- When a game starts the cards are in random order based on their ranks
- The randomising function is implemented by using the shuffling plan
Each time the player will click two cards. The card will stay face-up if paired, or flip face-down after a few milliseconds
- After two cards selected, the cards stay face-up if their ranks are matching
- The paired (matching rank) cards will be recorded (stored) for presentation of gaming result when finished
- Paired cards cannot be selected again (clicking it shouldn't invoke any event leading to further tasks)
- After two cards selected, the cards turn back to face-down if unpaired (mismatching ranks)
- The mismatching cards will stay for a few milliseconds before turning face-down (animation effect) When click "Stop Game" button an ongoing game is terminated
An alert window pops up, presenting the gaming result as Figure 3, when a game is terminated
- The number of pairs displaying on the result alert window is correct
- The paired cards are presented in correct format of "suit-rank" and value (using Ace, Jack, Queen, and King)
- The paired cards are listed in ascending order from Ace to King, ignoring suits
- The sorting function is implemented by Bubble Sort algorithm
A new game with timer set to 60 seconds starts automatically when the gaming result window is killed Subtotal
10 Non-functional Requirements
The script is running free from any syntax errors
No code goes outside of script section except from what provided in template No functions and strategies used in the script are beyond the course content
ALL functions should be formally commented in JavaDoc (appropriate in both style and content) Code is grouped based on the common tasks attempting to. Each block of code is commented briefly Code in the script is organised in order of variables, statements, and functions
All identifiers follow conventions in professional style
Code in the script is indented correctly for all loop, if-else statements, and functions Code has been cleaned, all testing statements have been removed.
Conceptual Design
Aiming at delivering the required functionality effectively, a conceptual model is first designed and presented in Fig. 4. The model has two layers:
• Presentation Layer: sets up the gaming interface and controls the presentation of cards. Four functions are included in the layer: showCard(), hideCard(), isPairedCard(), and sortCards();
• Operation Layer: handles the tasks in game playing, such as comparing the player-chosen cards to identify pairs. Five functions are included in the layer: playttame(), stopttame(), resetT imer(), shuffleCards(), and selectCard().
A function in one layer might use functions in the other layer. Two layers handle different tasks and work collectively to make the game functioning.
The program's architecture is designed on the basis of the conceptual model. Figure 5 presents the architecture and depicts the relationships within functions and between functions and the Interface, where solid arrows indicate the control flow in the game.
Array objects are also used to store the data for game operation. Four arrays are created in the design of the program:
• cardSet: stores the unique IDs of all 52 cards. Initialise the elements using their index value (card IDs or image file name without extension). It is these unique IDs being shuffled or sorted when the card images appeared random (shuffled) or sorted.
• preloadImages: stores 52 Image objects, each with the src property referring to a card image file. The image files are named from 0 to 51, following the card ranks from Ace, 2, 3, . . . 10, Jack, Queen, King and then suites of Spades, Hearts, Diamonds, and Clubs;
• guessCards: stores the IDs of two cards that the player is currently choosing and pairing. Note that this array has only TWO elements;
• pairedCards: stores the IDs of cards that the player has paired correctly.
Design Specification
Presentation Layer showCard()
The function accesses to all cards one by one and turns them face-up one by one. The function takes an argument as the ID of a card image on the table and doesn't return anything.
1. Get the reference to the image by using document.getElementById() and the ID;
2. Turn the card face-up by changing the value in the image's src property with the correspond- ing value in preloadImages.
3. Increment the argument and make it the ID of next card;
4. Call back to showCard() itself with the incremented ID as the argument. Use setT imeout() to delay the process and make an animation effect.
*Hint: referring to the "imagePreloading.html" exercise in Workshop 8c - Events for hints.
hideCard()
The function accesses to all cards and turns them face-down one by one if the cards are not identified as the found, paired cards. This might happen when the user was cheating during a session by clicking "Show Cards" button to display all cards and then clicked "Flip Cards" button to turn them back to face-down. The function takes an argument as the ID of a card image on the table and returns nothing.
1. Get the reference to the image by using document.getElementById() and the ID;
2. Check if the ID is an element in pairedCards by calling to the isPairedCard() function;
3. If not in pairedCards, replace the value in the image's src property by "back.gif ".
4. Increment the ID and call back to hideCard() itself to flip over and hide next card. Use setT imeout() to delay the process and make an animation effect.
*Hint: the strategy is similar as the one in showCard().
isPairedCard()
The function takes an argument and returns a Boolean value, true, if the argument occurs in pairedCards, or false, otherwise.
*Hint: using the searching plan (Workshop-9b - Searching) for checking the presence of a target value in an array.
sortCards()
The function takes an array as the argument and uses the BubbleSort algorithm to sort the elements in the array. Note that as in the playing card context, the sorting algorithm should be based on the rank of cards from Ace, 2, 3, . . . 10, Jack, Queen, and then King. The function returns nothing.
Hints:
- using cycle position plan (Workshop 6c) to calculate the rank of a card;
- referring to Workshop 9d - Sorting for BubbleSort algorithm.
Operation Layer
playGame()
This function starts a new gaming session by firstly shuffling and flipping all cards face-down and then starting up the timer. The function takes no argument and returns nothing.
1. In a loop access to each of elements in preloadImages and cardSet:
- Assign the element of preloadImages an instance of Image object that holds the refer- ence to a card image;
- Assign the element of cardSet a unique value for the ID of a card (e.g., using the stepper value of loop).
2. Instantiate a new instance for pairedCards and guessCards, respectively, and make them ready to start a new game;
3. Shuffle all cards by calling shuffleCards() and pass cardSet as the argument;
4. Turn all cards face down by calling hideCard() and pass 0 as the initial argument;
5. Reset the timer by calling resetT imer() and pass 60 as the argument for a new game.
resetTimer()
Starting with 60 seconds, this function makes the timer ticking down second by second. The function will terminate the current session if time runs out. The function takes a Number value, say, sec, as the argument and returns nothing.
1. Get the reference to titleArea by using document.getElementById();
2. Reprint to titleArea the title and the value in argument as the remaining time in seconds;
3. Decrement the value in sec to count down the timer;
4. Call back to itself (resetT imer()) with the updated sec if the time has not yet run out (sec is greater than zero). Use setT imeout() to delay the process and make an animation effect;
5. Call stopttame() to terminate the current game if the time has run out (sec becomes zero).
*Hint: referring to the "countDown.html" exercise in Workshop-8a - HTML Objects for how to reprint (rewrite information) on an HTML page.
stopGame()
When the user clicks the "Stop Game" button or the timer reaches 0 seconds, the stopttame() function terminates the current game session, displays on an alert window the gaming result (the number of found pairs and the cards listed in a sorted order), and then makes the game ready for next session.
1. Stop the timer by using clearT imeout().
2. Sort the cards in pairedCards by calling to sortCards().
3. Generate and alert the "result" message using the sorted cards.
4. Make the game ready for next session by calling playttame().
*Hint: using cycle position plan (Workshop 6c) to calculate the rank of cards.
shuffleCards()
This function takes an array as the argument and randomises order of the elements in the array by using the shuffling plan. The function returns nothing.
*Hint: referring to Workshop 5d - Swapping and Shuffling for shuffling plan.
selectCard()
The function turns the card face-up when the user clicks a flipped, face-down card. In each of the second click (then two cards are shown), the function adds the cards to the pairedCards array if they are in a pair (with the same rank, ignoring suites) or flips the cards back to face-down again, otherwise. The function takes an argument as the ID of user clicked card (the card image on the table) and returns nothing.
1. If the card with ID (the argument) is not occurred in pairedCards, do Step 2-5:
2. Get the reference to the image using document.getElementById() and the ID (the argument);
3. Turn the card face-up by changing the value in the image's src property to the corresponding value from preloadImages.
4. Add the ID (the argument) into the guessCards array if this is the first card in selection, or, this is a different card from the first one if it is the second card in selection;
5. If the size of guessCards becomes two, check if the two cards have the same rank;
- If yes, add the cards (their IDs) into the pairedCards array;
- If not, flip the cards over to face-down after a while, say, 300 milliseconds. (Get the reference to the images by using document.getElementById() and their IDs stored in guessCards and replace the value in the image's src property by "back.gif ". Using setT imeout() to make the animation effect);
- In either yes or not, make guessCards ready for next two cards in selection by re- instantiating guessCards (call to the constructor of Array again with new keyword).
Attachment:- Assignment_sources.zip