Web Development Project: Blackjack

49 Projects
You are not logged in
Web
Development
Project
Project: Blackjack
Creator:	Graphix
Project type:	Games
Created on:	2010-08-18 11:04:59
Last edit:	2010-11-16 20:03:44
Download:	Start download now
Introduction

I always like making games for the web, and this is one of them. The script allows the player to play blackjack with a starting fake $2000.

The game starts when the user presses the 'Start a new game!' button. The user gets to decide how much he would like to bet (0-2000). And then presses the button 'Bet!'. The cards are dealed and the user is asked to decide what he wants to do next: stand, hit or double down.

If the user stands, the dealer decisions are calculated and a winner is decided. Then the game is ended, and the winner is calculated. If the user wins, he gets twice his wager back. If he looses, he looses his wager. Then the game resets.

When the user hits, the user gets another card. If he exceeds 21 he looses and else he gets to choose between stand and hit.

If the user decides to double down, he gets dealed a card and he doubles his bet. Then the game is ended, and the winner is calculated. Then the game resets.
Interface

The interface is pretty simple:


In the top left the money status

In the top right the wager status

The background is a table

At the top of the table, there are the dealer cards

At the bottom of the table, there are the player cards

In the center of the table, is the form that interacts with the player


Programming

First off: setting the initial variables used in the game. You can see what the variables are for by reading the comments.

Code Snippet (Syntax highlighted) - Toggle Wrap

/* Setting the variables */

var Pcards = new Array; // Array of the cards of the player (starting at 0)
var PcardsAmount = 0; // Amount of cards the player holds
var PlayertotalAces11 = 0; // Used for ace exceptions
var DealertotalAces11 = 0; // Used for ace exceptions
var dealerValue = 0; // Total of all the values of the cards of the dealer
var playerValue = 0; // Total of all the values of the card of the player
var randomSuit; // Just the suit (spades, hearts, clubs or diamonds)
var randomCard; // Just the card (2,3,4,5,6,7,8,9,10,J,Q,K,A)
var randomFullCard1; // The suit and the card -> first suit then card (E.g. Spades9)
var number1 = 0; // Used in getNumber()
var number2 = 0; // Used in getColor()
var wager = 0;
var totalmoney = 2000;


Now declaring all the different card options that exist:

Code Snippet (Syntax highlighted) - Toggle Wrap

/* Setting all cards */

var card = new Array; // Array of the cards (2,3,4,5,6,7,8,9,10,J,Q,K,A)
var suit = new Array; // Array of the colors (spades, hearts, clubs or diamonds)

for (var i = 0; i < 13; i++) {
  card[i] = new Array;
}
card[0]['value'] = 2;
card[0]['name'] = 2;
card[1]['value'] = 3;
card[1]['name'] = 3;
card[2]['value'] = 4;
card[2]['name'] = 4;
card[3]['value'] = 5;
card[3]['name'] = 5;
card[4]['value'] = 6;
card[4]['name'] = 6;
card[5]['value'] = 7;
card[5]['name'] = 7;
card[6]['value'] = 8;
card[6]['name'] = 8;
card[7]['value'] = 9;
card[7]['name'] = 9;
card[8]['value'] = 10;
card[8]['name'] = 10;
card[9]['value'] = 10;
card[9]['name'] = "J";
card[10]['value'] = 10;
card[10]['name'] = "Q";
card[11]['value'] = 10;
card[11]['name'] = "K";
card[12]['value'] = 11;
card[12]['name'] = "A";
suit[0] = "&nbsp;<span style='color:black;'>&#9824;</span>"; // Spade
suit[1] = "&nbsp;<span style='color:red;'>&#9829;</span>"; // Hearts
suit[2] = "&nbsp;<span style='color:black;'>&#9827;</span>"; // Clubs
suit[3] = "&nbsp;<span style='color:red;'>&#9830;</span>"; // Diamonds


The next thing I wrote were the random card generators:

Code Snippet (Syntax highlighted) - Toggle Wrap

/* Retrieves a random number between 0 and 12, and returns it */
function getNumber(type) {

  number1 = Math.floor(Math.random() * (12 + 1));
  cardInfo = new Array;
  cardInfo[0] = card[number1]['name'];
  cardInfo[1] = card[number1]['value'];
  return cardInfo;

}

/* Retrieves a random number between 0 and 3, and returns it */
function getSuit() {

  number2 = Math.floor(Math.random() * (3 + 1));
  return suit[number2];

}

/* Uses the getSuit() and getNumber() to get a fairly random card */
function randomFullCard() {

  randomSuit = getSuit();
  randomCard = getNumber('name');
  randomFullCard1 = randomSuit + randomCard;
  return randomFullCard1;

}



Now a function follow that are used to wage the money the user entered in the first prompt. The second function is used when the user presses the double down option.

Code Snippet (Syntax highlighted) - Toggle Wrap

/* Adds the money to the wage and withdraws it from totalmoney */
function wageMoney(money_amount) {

  money_amount = parseInt(money_amount);

  if (totalmoney >= money_amount && money_amount >= 0) {

    // Showing the choosebox and hiding the wagerbox
    document.getElementById('choosebox').style.display='inline';
    document.getElementById('wagerbox').style.display='none';
    totalmoney -= money_amount;
    wager += money_amount;
    document.getElementById('totalmoney').innerHTML = totalmoney;
    document.getElementById('totalwager').innerHTML = wager;
    // Adding the cards
    addCardDealer();
    addCardPlayer();
    addCardPlayer();

  } else {

    alert("Not sufficient amount of money!");

  }

}

/* Function that is activated after there was a click on the double down button (doubleButton) */
function doubleWageMoney() {

  if (totalmoney >= wager) {

    totalmoney -= wager;
    wager = wager * 2;
    document.getElementById('totalmoney').innerHTML = totalmoney;
    document.getElementById('totalwager').innerHTML = wager;
    document.getElementById('doubleButton').style.display = "none";
    addCardPlayer();

    if (playerValue <= 21) {
      decideDealer();
    }

  }
}


Now comes the real core of our script: the dealing of the cards. What the functions do are pretty straight forward.

Code Snippet (Syntax highlighted) - Toggle Wrap

/* Hands a card to the player */
function addCardPlayer() {

  var receivedCardInfo = getNumber();
  var extraCard1value = receivedCardInfo[1];
  var extraCard1name = receivedCardInfo[0];
  var extraCard1suit = getSuit();
  
  /* Ace exception 1 */
  
  if (extraCard1value == 11) {
    if ((playerValue + 11) > 21) {
      extraCard1value = 1;
    } else {
      PlayertotalAces11 = PlayertotalAces11 + 1;
    }
  }

  /* Updating the playerValue */
  playerValue += extraCard1value;
  
  /* Ace exception 2 */
  
  if (PlayertotalAces11 >= 1) {
    if (playerValue > 21) {
      playerValue -= 10;
      PlayertotalAces11--;
    }
  }

  /* Saving which card it is and adding 1 to the total card amount */
  Pcards[PcardsAmount] = extraCard1name;
  PcardsAmount++;

  /* The double down option */
  if (PcardsAmount > 2) {
    document.getElementById('doubleButton').style.display='none';
  } else if (PcardsAmount == 2) {
    document.getElementById('doubleButton').style.display='inline';
  }

  /* Updating values */
  document.getElementById("valuePlayerCards1").innerHTML = playerValue;
  document.getElementById("playercards").innerHTML += "<span style='background-color:white;'>" + extraCard1suit + "<span style='color:black;'>" + extraCard1name + "&nbsp;</span></span>&nbsp;";

  /* Blackjack option */
  if ((Pcards[0] == "J" && Pcards[1] == "A") || (Pcards[0] == "A" && Pcards[1] == "J")) {
    blackjackWin();
  }

  if (playerValue > 21) {
    decideWinner();
  }

}

/* Hands a card to the dealer */
function addCardDealer() {

  var receivedCardInfo = getNumber();
  var extraCard1value = receivedCardInfo[1];
  var extraCard1name = receivedCardInfo[0];
  var extraCard1suit = getSuit();

  /* Ace exception 1 */

  if (extraCard1value == 11) {
    if ((dealerValue + 11) > 21) {
      extraCard1value = 1;
    } else {
      DealertotalAces11 = DealertotalAces11 + 1;
    }
  }
  // Updating the dealerValue
  dealerValue += extraCard1value;

  /* Ace exception 2 */

  if (DealertotalAces11 >= 1) {
    if (dealerValue > 21) {
      dealerValue -= 10;
      DealertotalAces11--;
    }
  }

  // Updating values
  document.getElementById("valueDealerCards1").innerHTML = dealerValue;
  document.getElementById("dealercards").innerHTML += "<span style='background-color:white;'>" + extraCard1suit + "<span style='color:black;'>" + extraCard1name + "&nbsp;</span></span>&nbsp;";

}


The following function deletes the previous stats and shows the next prompt:

Code Snippet (Syntax highlighted) - Toggle Wrap

/* If the player clicked on the start-button, this function will be activated: */
function initGame() {

  // Deleting the stats from previous game
  document.getElementById("valuePlayerCards1").innerHTML = 0;
  document.getElementById("valueDealerCards1").innerHTML = 0;
  document.getElementById("playercards").innerHTML = "";
  document.getElementById("dealercards").innerHTML = "";

  // Showing the necersary things
  document.getElementById("choosebox").style.display="none";
  document.getElementById("wagerbox").style.display="inline";
  document.getElementById("part3").style.display="none";
  document.getElementById("part2").style.display="inline";

}


This is the part of the code that is the engine, that stands the player, decide the dealer, and decide the winner:

Code Snippet (Syntax highlighted) - Toggle Wrap

// If the player is satisfied with his score, he clicked the stand-button.
// That button activates the following function:
function standPlayer() {
  decideDealer();
}

// Decides what the dealer is going to do
function decideDealer() {
  if (dealerValue < 16) {
    addCardDealer();
    decideDealer(); // As long as the total value of the cards is lower as 16 the function gets recalled
  } else {
    decideWinner();
  }
}

// Decides who the winner is, the player is winner if:
// The player has less than 21 and the player has more points as the dealer
// The dealer's value is more than 21 (Bust)
function decideWinner() {

  if ((playerValue <= 21 && playerValue > dealerValue) || dealerValue > 21) { // If the player is winner

    totalmoney += 2 * wager; // Deals out 2 times the wager
    document.getElementById("totalmoney").innerHTML = totalmoney;
    document.getElementById("displayMessage").innerHTML = "Congratulations, you win €" + wager;
    document.getElementById("part3").style.display="inline";
    wager = 0;
    resetGame();

  } else {

    if (playerValue == dealerValue && playerValue <= 21 && dealerValue <= 21) { // If it is a tie

      totalmoney += wager; // Deals out the same amount as the wager: it is a tie
      document.getElementById("totalmoney").innerHTML = totalmoney;
      document.getElementById("displayMessage").innerHTML = "It is a tie";
      document.getElementById("part3").style.display="inline";
      wager = 0;
      resetGame();

    } else { // If the dealer is winner

      wager = 0;
      document.getElementById("totalwager").innerHTML = wager;
      document.getElementById("displayMessage").innerHTML = "You loose, try again?";
      document.getElementById("part3").style.display="inline";
      resetGame();
    }

  }

}

/* If the player has blackjack */
function blackjackWin() {

  var ExtraPayOut = 0.5 * wager;
  totalmoney += ExtraPayOut + (2 * wager);
  var moneyWon = ExtraPayOut + wager;
  wager = 0;
  document.getElementById("totalmoney").innerHTML = totalmoney;
  document.getElementById("displayMessage").innerHTML = "Congratulations with blackjack, you win €" + moneyWon;
  document.getElementById("part3").style.display="inline";
  resetGame();

}


When the game has ended, the game is resetted by this function:

Code Snippet (Syntax highlighted) - Toggle Wrap

// Resets all the variables and the display's, this function is called at
// then end of the decideWinner() function.
function resetGame() {

  document.getElementById("part2").style.display="inline";
  document.getElementById("wagerbox").style.display="none";
  document.getElementById("choosebox").style.display="none";
  document.getElementById("totalwager").innerHTML = 0;
  document.getElementById("startButton").style.display = "inline";
  document.getElementById("doubleButton").style.display = "none";
  wager = 0;
  dealerValue = 0;
  playerValue = 0;
  DealertotalAces11 = 0;
  PlayertotalAces11 = 0;
  PcardsAmount = 0;

}


Now creating the interface of the BlackJack:

Code Snippet (Syntax highlighted) - Toggle Wrap

// Showing the blackjack table
document.write('<div style="background-color:white; position:relative; left:0px; top:0px; text-align:left; width:431px; height:350px; border:0px solid black; color:white; font-family:Calibri;')
document.write("background-image: url('http://www.symbolwebdesign.nl/demos/blackjackbg.bmp'); background-repeat:no-repeat;");
document.write(';">');
document.write(' <form action="" onsubmit="return false;" method="post" name="blackjack">');
document.write('  <div id="part01" style="position:absolute;top:2px;left:2px;color:black;">');
document.write('   Money: &euro;<span id="totalmoney">2000</span>');
document.write('  </div>');
document.write('  <div id="part02" style="position:absolute; top:2px; left:322px; color:black;">');
document.write('   Wager: &euro;<span id="totalwager">0</span>');
document.write('  </div>');
document.write('  <div id="part1" style="position:absolute; top:169px; width:431px; text-align:center;">');
document.write('   <input id="startButton" type="button" value="Start a new game!" onclick="initGame();'); 
document.write("this.style.display='none'");
document.write(';" />');
document.write('  </div>');
document.write('  <div id="part2" style="display:none;">');
document.write('   <div id="dealerpart" style="position:absolute; top:50px; width:431px; text-align:center;">');
document.write('    Dealer cards(<span id="valueDealerCards1"></span>):<br />');
document.write('   <span id="dealercards"></span>');
document.write('   </div>');
document.write('   <div id="playerpart" style="position:absolute; top:225px; width:431px; text-align:center;">');
document.write('    Your cards(<span id="valuePlayerCards1"></span>):<br />');
document.write('   <span id="playercards"></span>');
document.write('   </div>');
document.write('   <div id="wagerbox" style="display:none; position:absolute; top:150px; width:431px; text-align:center; ">');
document.write('    Howmuch would you like to bet?<br />');
document.write('	&euro;<input type="text" id="wager" maxlength="255" /><input type="button" onclick="');
document.write("wageMoney(document.getElementById('wager').value);");
document.write('" value="Bet!" /><br />');
document.write('   </div>');
document.write('   <div id="choosebox" style="display:none; position:absolute; top:160px; width:431px; text-align:center; ">');
document.write('    What do you want to do?<br />');
document.write('    &nbsp;&nbsp;<input type="button" onclick="addCardPlayer()" value="Hit" onkeypress="" /><input type="button" onclick="standPlayer();');
document.write("document.getElementById('choosebox').style.display='none';");
document.write('" value="Stand" /><input type="button" id="doubleButton" style="display:none;" onclick="doubleWageMoney()" value="Double down" />');
document.write('   </div>');
document.write('  </div>');
document.write('  <div id="part3" style="display:none; position:absolute; top:150px; width:431px; text-align:center; ">');
document.write('   <span id="displayMessage"></span>');
document.write('  </div>');
document.write('  <div id="footerlow" style="position:absolute; top:336px; width:431px; text-align:center;">');
document.write('   <span style="font-size:12px;"><a target="_blank" style="color:blue;" href="http://www.symbolwebdesign.nl/development.php?view=downloads&language=english">Click here to get blackjack for your own site</a></span>');
document.write('  </div>');
document.write(' </form>');
document.write('</div>');

Using this code

There are two ways how you can implement this code:

1. Add the following piece of JavaScript code to your website:

Code Snippet (Syntax highlighted) - Toggle Wrap
<script src="http://www.symbolwebdesign.nl/webapps/blackjack.js" type="text/javascript"></script>


2. Or download the sourcecode and implement it yourself:

http://www.webdevproject.com/zips/BlackJack-source.zip

I extensively tested this code in all major browsers and if there are any problems, post a comment below and I will look into it.
Comments
Options