BrainJar.com: Blackjack (2024)

Blackjack

Play the game or view thesource code.

First, take a break and play the game to get anidea of how it works. You'll see that various elements on the page aredynamically updated, added and removed during the course of play. Be sure toread the rules provided. It will help in understanding much of the program flowand comments in the rest of this article.

Games necessarily require a good deal of interaction and dynamic content.This one demonstrates many features of style sheets, scripting and use of theDocument Object Model (DOM). As it is a fairly large script, some details ofthe code are omitted. The comments in the source should help explain the finerpoints and other articles on this site provide good information on many of thetechniques used, particularly on using CSS and the DOM.

Page Layout

If you look at the HTML for the game page, you'll see that it is broken upinto several areas using DIV tags. First there are the areas for the dealer andplayer made up of a main DIV tag containing other DIVs for the cards and textmessages.

<!-- Dealer's area. --><div id="dealer" class="playingField"> <div class="textBox name">Dealer</div> <div id="dealerScore" class="textBox">&nbsp;</div> <div id="dealerCards" class="cardArea"></div></div><!-- Main player's area. --><div id="player0" class="playingField"> <div class="textBox name">Player</div> <div id="player0Score" class="textBox">&nbsp;</div> <div id="player0Bet" class="textBox dollars">&nbsp;</div> <div id="player0Result" class="textBox result">&nbsp;</div> <div id="player0Cards" class="cardArea"></div></div>

The style class textBox specifies float:right; soall the text blocks appear on the far right of these areas while thecardArea DIV takes up the rest of the space in the main DIV. Thecard area is initially empty but will be filled and cleared dynamically as thegame is played.

Additional Player Areas

Although the game is designed for a single player, it does allow "splits."That is, when the player is dealt a pair on his or her first two cards, he orshe can split the cards into two separate hands. Likewise, either of these canbe split again if another pair is dealt.

To accommodate this, three other sets of DIVs are defined in the code. Theseare exactly like the main player's area except for the the IDs assigned to eachelement. The rules limit the player to a maximum of three splits in any roundso three additional areas are needed.

Control Buttons

Below the playing areas is a form with several buttons. Each has a functionassigned to it using the onclick event to allow the player to takevarious actions during play.

Some buttons are initially disabled. During the course of the game,individual buttons will be dynamically enabled or disabled by the scriptdepending on various circ*mstances. This way, the user will only be able tochoose from whatever options are valid at any given point in the game.

For example, the player can only surrender at the start of a round when thefirst two cards are dealt. Should the player choose to hit, stand or take anyother option instead, the "Surrender" button is disabled for the remainder ofthe round.

This helps reduce the amount of code needed as we don't have to check if agiven action is valid each time. It also helps the user by giving a visual clueat to what options are available at any given time.

Other Areas

To the right of the control buttons are two more DIVs for displaying theplayer's current credit line and and his or her default bet. The playerwill be allowed to change this bet amount before each round and the creditswill automatically be updated as hands are played and won or lost.

At the bottom of the page the rules are printed. Like the additional playingareas these are in a DIV tag with display:none; set as an inlinestyle to initially hide it. One of the form buttons calls a function that willtoggle this setting, allowing the player to view the text at will.

The Playing Cards

The cards themselves are created using two user-defined JavaScript objects,Card and Stack, which represent individual cards andsets (decks) of cards respectively.

See CSS Playing Cards andJavaScript Card Objects for details.

The Card object also provides a means to dynamically displayany given card on the page. As these objects are described in previouslyfeatured articles on the site, the details won't be discussed again here. Youcan view the articles at right for some background information if you haven'talready read them.

Suffice to say, these objects will allow us to create a deck of cards,shuffle it, deal cards from it and create DOM nodes for displaying individualcards on the page.

In the interest of reducing file size, the code for the Card andStack objects has been stripped down in this script to includeonly the features needed for the game.

Handling the Deck

The deck (or shoe) is initially created by a call to thenewDeck() function which creates a new Stack object,fills it with cards and gives it a good shuffle.

function newDeck() { // Create a deck. deck.makeDeck(numPacks); deck.shuffle(numShuffles); // Set the burn card. burnCard = Math.round(Math.random() * 26) + 13;}

It also randomly selects a number to signify a "burn" card near the bottomof the deck. Before any new round is started, the number of cards left in thedeck is checked against this value. If the burn card has been reached orpassed, a brand new deck is created by calling this function again.

This is done to help prevent running out of cards during play. But it'sstill a possibility (especially if the player splits or even resplits) sowhenever a card needs to be dealt, the getNextCard() function isused rather than calling the Stack object's deal()method directly.

function getNextCard() { // If there are no cards left, start a new deck. if (deck.cardCount() == 0) { alert("New Deck"); newDeck(); } return deck.deal();}

If first checks whether the deck is empty and if so, creates a new one. Itthen uses deal() to pull the next card in the deck and returnit.