Lab 10: Hand of Cards
This lab will give you a chance to work on a more sizable program. When working
on complex programs it is important that the program is developed incrementally.
Little bits are added at a time and completely checked before moving on to the
next bit. In this lab, the different steps are laid out for you. Do not try
to do everything at once. Also make full use of the javascript debugger.
You are to further implement the blackjack program we have been discussing
in class. Your final goal is to have a javascript program so that can deal an
unlimited number of cards in a hand and can also compute the score of the entire
hand. Start with the version of the program you created in the last lab. This
program should already be able to deal two cards from a full deck of 52 cards
and to print the names of these cards onto the textarea. Note that most of the
code for the functions discussed below were given to you in class.
Follow the steps below to modify your program. Finish and test each step
before moving on to the next step.
Adding More Cards
- Right now there are only two images (<img src ... >) in the program.
Modify your program so that there are six images for cards. (It is highly
unlikely that anyone could draw six cards without exceeding a score of 21.)
Initialize them using the blank.gif
file that is in the card image folder. Your program should start out with
just the blanks showing. When the "deal" button is pressed, 2 cards
should appear in the first two image slots.
- Modify your program so that the 2 initial card indices are placed in an
array (e.g. called Hand). To print the cards out to the text area, you should
use a loop.
- Make sure the above code for printing out the list of cards has been placed
in a separate function (e.g. called printHand). This function can then be
called whenever you want to see what is in the hand.
- Add a button to add a new card. When this button is pressed, a new card
should be created by placing a new card index into the Hand array. This card
should be placed at the end of the array. Since the array has Hand.length
cards (in array positions 0 to Hand.length-1)
the new card index should be placed at position Hand.length. After the card
is added, print the list of the card names to the textarea by calling your
printHand function.
- You also need to add the image of the new card. To do this, set the src
of the next available image to the correct image jpg file.
- Since there are only images allowed, you need to add a conditional statement
that checks to see if there is still room to add a new card when the addCard
button is pressed. If the Hand array already has 6 cards in it then nothing
should happen.
- Each time you press the deal button to deal the first two
cards, you must make sure the images of the old hand are not showing. This
means when the deal button is pressed you need to set the image src to blank.gif
for the last four images.
The above modifications should be finished by next Friday (Nov 17).
Scoring
- Add a function that computes the score for a single card. Assume aces are
11. You can check to see that your function works by calling for this function
on the first two cards that are dealt. Keep dealing cards until you are sure
that the function works properly. This function was done in class.
- Add another to compute the score for the entire hand. This will require
a loop over the cards to compute the total score. Another loop is required
to readjust the score of any aces. This function was done in class. Each time
a new hand is dealt or a new card is added, call this program and print out
the resulting score. Check it on many different hands, especially ones that
have aces whose value should be 1 and not 11.
Extra Credit
- Modify your program so a card cannot be picked twice.
The above modifications should be finished by next Monday (Nov 20).
Test Questions
Email these questions before you leave for Thanksgiving (the sooner the
better).
[top]
[Syllabus]
[Home]