BlackJack

A simple BlackJack game.

by kalmarsh80

HTML

<div id="dealerHand"></div>
<div id="yourHand"></div>
<div id="yourScore">Your Score: <span class="digits">0</span> Record: <span id="wins">0</span>&nbsp;/&nbsp;<span id="losses">0</span></div>
<button id="deal">Deal</button>
<button id="hitMe">Hit</button>
<button id="stand">Stand</button>

CSS

body {
    font-family:sans-serif;
    padding:1em;
}
#yourHand {
    overflow:hidden;
    position:relative;
    border:1px solid #056B42;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    background: #287B59;
    color:#69D1A7;
    padding:.5em;
    font-size:1.1em;
    height:6em;
    width:25em;
}
.card {
  background:#fff;
  border: 1px solid gray;
  border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
  -moz-box-shadow:0 2px 2px 1px #999;
    -webkit-box-shadow:0px 2px 2px 1px #999;
    box-shadow:0 2px 2px 1px #999;
  font-size: 20pt;
  float: left;
  width:  3.75em;
  height: 5em;
  padding:.1em;
  margin-right:-1em;
 font-family:serif;
}
.card:first-child {margin-left:0;}

.Spades, .Clubs {color:black}
.Diamonds, .Hearts {color:red}

#deal {
    -moz-box-shadow:inset 0px -1px 4px 3px #9f71d1;
    -webkit-box-shadow:inset 0px -1px 4px 3px #9f71d1;
    box-shadow:inset 0px -1px 4px 3px #9f71d1;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9f71d1), color-stop(1, #3a096a) );
    background:-moz-linear-gradient( center top, #9f71d1 5%, #3a096a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9f71d1', endColorstr='#3a096a');
    background-color:#9f71d1;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #3a096a;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:7px 13px;
    text-decoration:none;
    text-shadow:1px 1px 0px #3a096a;
}
#deal:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3a096a), color-stop(1, #9f71d1) );
    background:-moz-linear-gradient( center top, #3a096a 5%, #9f71d1 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a096a', endColorstr='#9f71d1');
    background-color:#3a096a;
}

#hitMe {
    -moz-box-shadow:inset 0px...

JavaScript

/** @constructor */
var Card = function (suit, number){
    /** @returns {Number} The number of the card in the deck. (1-52) */
    this.getNumber = function (){
        return number;  
    };
    /** @returns {String} The name of the suit. "Hearts","Clubs","Spades", or "Diamonds." */
    this.getSuit = function (){
        var suitName = '';
        switch (suit){
            case 1:
                suitName = "Hearts";
                break;
            case 2:
                suitName = "Clubs";
                break; 
            case 3:
                suitName = "Spades";
                break; 
            case 4:
                suitName = "Diamonds";
                break;                
        }
        return suitName;
    };
    /** @returns {String} The HTML-encoded symbol of the suit. */
    this.getSymbol = function (){
        var suitName = '';
        switch (suit){
            case 1:
                suitName = "&hearts;";
                break;
            case 2:
                suitName = "&clubs;";
                break; 
            case 3:
                suitName = "&spades;";
                break; 
            case 4:
                suitName = "&diams;";
                break;                
        }
        return suitName;
    };
    /** @returns {Number} The value of the card for scoring. */
    this.getValue = function (){
        var value = number;
        if (number >= 10){
            value = 10;
        }
        if(number === 1) {
            value = 11;
        }
        return value;
    };
    /** @returns {String} The full name of the card. "Ace of Spades" */
    this.getName = function (){
        var cardName = '';
        switch (number){
            case 1:
                cardName = "A";
                break;
            case 13:
                cardName = "K";
                break;
            case 12:
               cardName = "Q";
                break;
            case 11:
                cardName = "J";
...