BrainJar.com: Blackjack

Blackjack

Play the game or view the source code.

5. Ending the Round

When all hands, including the dealer's, have been played out we can evaluate the outcome. The endRound() function first restores the form buttons in anticipation of the next round and then reveals the dealer's down card.

function endRound() {

  var i, d, p, tmp;

  // Enable/disable buttons.

  document.forms["controls"].elements["deal"].disabled = false;
  EnableBetButtons();
  DisablePlayButtons();

  // Fix for IE 6 rendering bug.

  if (navigator.userAgent.indexOf("MSIE 6") >= 0) {
    dealer.cardsNode.firstChild.style.backgroundImage = "none";
    dealer.cardsNode.firstChild.style.backgroundColor = "white";
  }

  // Show the dealer's down card and score.

  dealer.cardsNode.firstChild.firstChild.style.visibility = "";
  d = dealer.getScore();
  if (!dealer.blackjack && d <= 21)
    dealer.scoreTextNode.nodeValue = d;

  ...

Internet Explorer 6

There's a small bit of code here to work around a bug in Internet Explorer 6. Normally, just making the DIV for the front of the card visible would suffice for displaying the dealer's down card. But IE 6 has a bug that causes the card back image to remain visible. Removing the background image of the containing DIV and forcing its background color to white corrects the display for this browser.

Next, it then loops through the players[] array, checking each player hand and comparing its score to the dealer's, if necessary, to determine if the hand won, lost or tied.

  // Show result of each player hand and pay it off, if appropriate.

  for (i = 0; i < numPlayerHands; i++) {
    p = player[i].getScore();
    if (player[i].surrender) {
      player[i].resultTextNode.nodeValue = "Player Surrendered";
      player[i].bet /= 2;
      credits += player[i].bet;
    }
    else if ((player[i].blackjack && !dealer.blackjack) ||
             (p <= 21 && d > 21) || (p <= 21 && p > d)) {
      player[i].resultTextNode.nodeValue = "Player Wins";
      tmp = 2 * player[i].bet;

      // Blackjack pays 3 to 2.

      if (player[i].blackjack)
        tmp += player[i].bet / 2;

      player[i].bet = tmp;
      credits += player[i].bet;
    }
    else if ((dealer.blackjack && !player[i].blackjack) ||
             p > 21 || p < d) {
      player[i].resultTextNode.nodeValue = "Player Loses";
      addClassName(player[i].betTextNode.parentNode, "lost");
    }
    else {
      player[i].resultTextNode.nodeValue = "Push";
      credits += player[i].bet;
    }
    updateBetDisplay(i);
  }
}

If a hand won, the bet on it is paid and the player's credits are updated accordingly. Text messages for each hand are also updated to let the user know its fate.

Once this function completes, code execution ends. The player may increase or decrease his or her bet using the appropriate button and start a new round by pressing the "Deal" button.

Conclusion

There are a few miscellaneous functions used that were not covered. However, the purpose and implementation of these should be obvious from the source code. Likewise, much of the HTML and styles used to set up the page layout and display should be self-explanatory and can be found in the source.

Browser Compatibility

One interesting fact about this script is that almost no browser-specific coding is required. This can be attributed to the use of standards for CSS, the Document Object Model and the relatively limited use of events (Internet Explorer still uses a proprietary event model which gives rise to many incompatibilities).

About the only concession made (other than the IE 6 rendering bug mentioned earlier) is the use of var declarations for constant values instead of the more appropriate const keyword because Internet Explorer still does not support const.