CSC 551: Web Programming
Fall 2001

JavaScript Project

For your class project, you are to write an interactive Web page that allows the user to play the BlackJack. Recall the rules of the game:

Your page must provide a reasonable interface that models a real world game. There should be a row of cards displayed for both the player and the dealer, and the option of hitting or standing pat should be clearly available to the player. After each hit, the newly dealt card should be displayed and the total for that hand updated on the page. In addition, the page should identify a win or loss as soon as it becomes known and notify the player. At the end of the game, the player should be given the option of playing again, and a running total of wins and losses should be displayed in the page. Also, the player should be able to view the rules of the game at any time during play.

To make this task more manageable, the file has been provided for you. This library file contains the definition of the DeckOfCards class, whose interface is described below:

constructor, which initializes internal data fields to store a deck of 52 cards.
randomizes the order of the cards in the deck (no return value).
returns the card on the "top" of the deck, removing that card. Cards are represented as two character strings, with the first character designating the suit ("S", "H", "D", or "C") and the second character designating the rank ("2", "3", ..., "9", "T", "J", "Q", "K", "A").
returns the number of cards remaining in the deck.

As an illustration, the following JavaScript code segment would create a deck of cards, shuffle it, and repeatedly deal and display the names of cards until the deck was empty.

deck = new DeckOfCards(); deck.Shuffle(); while (deck.NumCards() > 0) { card = deck.Deal(); document.write(card + "<br>"); }

In addition, gif images of all 52 cards are provided in The name of the image file corresponds to the name of the card, e.g., the Ace of Spades is SA.gif, the 3 of Clubs is C3.gif, etc. An image of the back of a card is also provided under the name back.gif.

You may work with a partner in developing this project. In fact, working as a team is encouraged, since discussions about design and debugging often lead to a more robust, user-friendly application. If you do work in a team, only one program need be submitted for the team. To allow plenty of time for collaboration and feedback from the instructor, this assignment will be spread over the rest of this semester.

Prototype (Week 12)

At this point, you must have a working prototype of the game. All the page elements (tables, buttons, text boxes, etc.) must be in place, including the option of viewing the rules for the game. In terms of functionality, the page must deal and display the initial cards for the player and the dealer, allow the player to repeatedly hit, display the card total for the player after each hit, and then reveal the dealer's hidden card. At this stage, the page does NOT have to check for immediate wins or busts, does NOT need to deal additional cards to the dealer or recognize the winner, and does NOT need to support repeated games.

Final Version (Week 14)

For the final version of the program, you are to support repeated hands of BlackJack. When the hand is completed, the player should be given the option of playing again. If they choose to do so, new cards should be dealt and play repeated. A running score of wins and losses should be maintained in the page. This final version of the game should be robust, disallowing any player moves within the page that circumvent the rules.

For EXTRA CREDIT, you may utilize cookies (from to remember past scores for individual users. Your page should prompt the user for their name when the page loads, and if there is a cookie entry for that user, their scores should be uploaded into the page. When the page unloads at the end, it should give the user the option of saving their scores, updating the cookie accordingly.

Reminder: You are expressly forbidden to look at anyone else's source code for a BlackJack program.