CPSC 120, Fall 2014
Lab 14: Constructors and Methods
For the final lab of the semester, you will do one short exercise. You will get credit for completing the exercise during the lab period. You must be present for the full lab period to get credit. In the extra time, you can work on your web portfolio. Remember that you web portfolio should be complete by the day of the final exam, Friday, December 19.
You will need copies of all files that are in the folder named lab14 in /classes/cs120. To start the lab, you can copy lab14 directly into your www folder and work on it there. The only file that you will need to edit is vpoker.html.
Exercise: Baby Video Poker
"Video Poker" is a well-known slot machine game. The player places a bet and is dealt a hand of five cards. The player can select some cards in the hand to be discarded. When the player is ready, any discarded cards are replaced by new cards from the deck. Then the resulting hand is evaluated and, if the user wins, the payout is made. The goal is to get the best possible poker hand. You will work on a "baby" version of the game in which there is no betting and no evaluation of the hand. Consider it a kind of simple solitaire where the goal is to get good poker hand. (You won't even need to know what that means.)
You should work in the file vpoker.html. The program is almost complete. You just have to add some code to two functions at the end of the file named deal() and replaceDiscards().
There are two arrays in the program. One, which is named hand, holds the five Card objects that represent the cards in the hand. The other, which is named faceUp holds five boolean values that tell whether the cards are face up or face down. That is, card number N is face up if faceUp[N] == true, and it is face down if faceUp[N] == false. Note that you have to be careful to make sure that the values stored in faceUp correctly represent what is shown on the web page.
The deal() function should create a new Deck, and deal five cards from the Deck into the array that represents the hand of cards. It should show the card images for the new hand on the web page. Note that there is a global variable named deck that should refer to the deck of cards. The same deck is also used in the replaceDiscards function.
The replaceDiscards() function should go through the hand of cards. Any card that is face down should be replaced by a card dealt from the deck. Furthermore the card should be turned face up; that is, the corresponding value in the faceUp array should be set to true. And the image of the card on the screen needs to be changed. This function lets the user see their final hand of cards. (In a real game of Video Poker, this is where the hand would be evaluated.)
You do not have to change any part of the file outside of the functions deal() and replaceDiscards(). But you should be able to understand the rest of the code in vpoker.html, and you will want to look at the functions initialize() and doClickOnCard(). In particular, note the commands in initialize that ar used to set the image shown for card number i:
var image = document.getElementById( "c" + i ); image.src = hand[i].getImageURL();
This uses the fact that the id's for the cards are "c0", "c1", "c2", "c3", and "c4". You will need something similar in your code to change the card images.
About Deck and Card
The classes Deck and Card were discussed in class. They are defined in the file Cards.js, which is loaded by vpoker.html. A Card object represents a single playing card. It has a value and a suit. A Deck object represents an ordinary deck of 52 playing cards. Here are short descriptions of the constructors and methods of the two classes, where deck is any object of type Deck and card is any object of type Card. Note that you will only need a few of these!
- new Deck() -- Creates a deck of cards. The deck contains one of each of the 52 possible playing cards. The deck is already "shuffled" so that the order of the cards is random.
- deck.nextCard() -- Returns an object of type Card. This function removes the next card from the deck and returns it. It "deals" a card from the deck. It is an error to call this function if all cards have already been removed from the deck.
- deck.shuffle() -- Puts any cards that have been removed from the deck back into the deck, and shuffles the deck into a new random order. Does not return a value.
- deck.cardsLeft() -- Returns an integer that tells how many cards are left in the deck.
- new Card(v,s) -- Creates a card with value v and suit s. The value can be given as a string "Ace", "King", "Queen", or "Jack", or as a number 2, 3, 4, 5, 6, 7, 8, 9, or 10. The suit can be one of the strings "Spades", "Hearts", "Clubs", or "Diamonds". (All suits and values can actually be given as integers; for example: 1 for "Ace", 13 for "King", 0 for "Spades".)
- card.getImageURL() -- Returns a string that contains the URL of an image of the card, suitable for use as the src property of an <img> element.
- card.getFaceDownImageURL() -- Returns a string that contains the URL of an image of the back of the card. (In fact, the return value is always cards-90x126/back.jpg".)
- card.toString() -- Returns a string representation of the card, such as "Ace of Spades".
- card.getValue() -- Returns the integer form of the card's value, in the range 1 to 13.
- card.getValueAsString() -- Returns the string form of the card's value, such as "Ace" or "7".
- card.getSuit() -- Returns the integer form of the card's suit: 0 for Spades, 1 for Hearts, 2 for Clubs, and 3 for Diamonds.
- card.getValueAsString() -- Returns the string form of the card's value, such as "Hearts".
Real Video Poker
Although it is not required for this lab, you might be interested in making a Video Poker game where the user places bets and wins payouts based on the hands that they get. This could be an idea for the extra project in your web portfolio. The hard part is figuring out what a given hand is worth, but most of that work is done by a function named computeRank that is already defined in the JavaScript file Cards.js. You just have to call computeRank(hand), and the function returns a string to tell you what type of poker hand it is. Here are the possible return values and the payouts for each type of hand:
| Return Value | Payout Multiplier |
|---|---|
| "Royal flush" | 250 |
| "Straight flush" | 50 |
| "Four of a kind" | 25 |
| "Full house" | 9 |
| "Flush" | 6 |
| "Straight" | 4 |
| "Three of a kind" | 3 |
| "Two pairs" | 2 |
| "High pair" | 1 |
| "Low pair" | 0 |
| "No hand" | 0 |
Your program will need to keep track of how much money the user has. You can start them off with, say, $100. And you will need some kind of input to determine how much money the user wants to bet, either a text-input box or a pop-up menu with preset bet amounts. The bet should be collected and subtracted from the user's money when the user deals a new hand. When the user replaces discards, you can evaluate the final hand using computeRank, tell the user the value of the hand, and make the payout. To determine the payout, the multiplier from the above table should be multiplied by the amount of the bet and the result should be added to the user's money. For example, if the hand is a "Royal flush", then add 250 times the bet amount to the user's money.
Note that for a "High Pair", the user simply gets back the amount that they bet; the user doesn't actually win anything. "High Pair" means a pair of Jacks or higher. "Low Pair" means a pair whose value is in the range 2 through 10. "Low pair" and "No hand" are both losing hands where the user loses the bet.