GNVQ
Advanced IT - Solitaire JavaScript programme design
All major information is stored in global variables so that it is easily accessible to all functions without having to pass arguments backwards and forwards throughout the script.
At the top of the script, the following global variables and constants are defined:
this function is called when the page first loads from the onLoad event handler of the <body> tag. It is also called when the user clicks the New Game button.
The functionm first initialises several variables:
The shuffleDeck() function attempts to shuffle the pack using the Math.random() method
The function starts by opening a window to inform the user that the pack is being shuffled. This is done because on some slower systems the shuffling process causes a noticeable delay in the program.
Before shuffling occurs, the card and suit of each card in the pack is cleared to a value of -1, indicating that no valid card has been assigned.
The shuffling process takes place within a for loop that iterates from 0 to 51 - each entry in the pack array.
For each entry in the array, the following process is used to select a card: An initial card is selected using Math.random(), and then a while loop is used to continue selecting cards until a card that hasn't been selected is found.
This test to see if the randomly selected card has already been used is done by calling cardSelected() with three arguments: the value and suit of the card plus the index number of the card in the pack.
Once the card is selected, the function closes the message
window.
a simple function which loops through each card in the
pack up to the card currently being selected and compares the card and
suit property to values of the arguments passed to the function.
If any card matches, then a false is returned by the function, otherwise
true is returned.
after calling the shuffleDeck() function, the startGame() function finished by calling dealCards() to display the first four cards of the pack. This function is also called by the onClick event handler of the Deal Cards button in the form to display the next four cards.
The first step taken by the function is to check the value of the hands counter. If it is 13, then all cards have been dealt and an alert dialogue is used to tell the player, and the function exits.
Otherwise the dealing process begins. First, the hands counter is incremented by one to reflect a new set being dealt and the value is used to calculate and display the number of cards remaining in the pack for the player.
Next, the four cards are dealt from the deck array into the card1, card2, card3 and card4 arrays.
This is done with four commands similar to this one, used to deal into the first pile:
card1[++cardPoint1] = deck[currentCard++]
The last step is to call displayCards() to display
the results of dealing the cards.
called by dealCards() after a new set of cards has been dealt and by removeCards() after a pair is successfully removed by the player
For each pile, the following steps are taken: If
the counter for the current pile (cardPoint1, and so on ) is zero,
then the pile is empty and an empty string is assigned to the value property
of the text field. Otherwise, the card property for the card object
pointed to by the counter is used as an argument to the charAt()
method of the card string, as is the suit property used for the suits string
to display the card's name in the appropriate field in the form.
is called by the appropriate button in the form.
The function starts by calling checkCards(). If the cards are valid, then removeCards() is called to remove cards.
Next, a check is made to see if the playerhas won by calling
checkWin().
On winning, userWon() is called to inform the player and if the
player wants to continue, startGame() is called. If the player
doesn't want to continue, then the farewell page is loaded.
extracts information about the player's selected cards.
The function first gets the pile numbers of the two selections (a value from one to four). This is accomplished by looking for the index number of the button where the checked property is true and then adding one to the value. A while loop increments the index until a selected button is found.
After the loop, the index is incremented by one. If no index had been found, the index will be four and be incremented to become five, an invalid value, but one that is handled by the next step in the function. This step is to see if either index is five. If it is, both are set to five, the values of the cards are set to zero, and the function exits.
If the two piles are valid selections, then the card values
for the piles are assigned to value1 and value2 using the
eval()
statement. This stetement takes a string and evaluates its content
as a JavaScript operation. In this case, the card property of the
top card is evaluated in a given pile using the value of choice1
or choice2 to select the right array name to work with.
performs three basic checks to confirm the validity of
the cards selected by the user. If choice1 is the same as
choice2
(ie the same card has been selected twice), or value1 is
different than value2 (ie the cards selected have different values),
or either value1 or value2 is equal to zero (ie the player
has selected at least one empty pile or not made a selection of one
of the cards) then the cards are invalid and a false is returned.
Otherwise true is returned.
First, the counters for the piles are decreased by one by using an eval() statement to evaluate the names of the pile arrays based on the values stored in choice1 and choice2.
Then, eval() statements are used to uncheck the two radio buttons.
Next, choice1 and choice2 are cleared to
zero and the taken counter is incremented by two and displayed.
Finally, displayCards() is called.
This function checks to see whether the user has won by
seeing all 52 cards have been taken (achieved by looking at the value
of the taken counter).
is called if the player has won. It informs the
player of the win and asks the player whether he/she wants to play again.
It does this by returning the value of a single confirm() method
call
The interactive game is designed using forms and basic
JavaScript. The game provides examples of event handlers, the eval()
statement, dynamic form updating, and the random() method.
| Top of Page | Home Page | Query for Tutor? |
