COP4813 Assignment 11 JTP

Shows how to create an array of playing cards and deal randomly from the array.

by Jason Pandelos

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<div class="gameInterface" id="oddsLegend">
    <table id="payoutTable">
        <tr>
            <td style="text-align:left;" width="50%">ROYAL FLUSH</td>
            <td width="10%">250</td>
            <td width="10%">500</td>
            <td width="10%">750</td>
            <td width="10%">1000</td>
            <td width="10%">4000</td>
        </tr>
        <tr>
            <td style="text-align:left;">STRAIGHT FLUSH</td>
            <td>50</td>
            <td>100</td>
            <td>150</td>
            <td>200</td>
            <td>250</td>
        </tr>
        <tr>
            <td style="text-align:left;">4 OF A KIND</td>
            <td>25</td>
            <td>50</td>
            <td>75</td>
            <td>100</td>
            <td>150</td>
        </tr>
        <tr>
            <td style="text-align:left;">FULL HOUSE</td>
            <td>9</td>
            <td>18</td>
            <td>27</td>
            <td>36</td>
            <td>45</td>
        </tr>
        <tr>
            <td style="text-align:left;">FLUSH</td>
            <td>6</td>
            <td>12</td>
            <td>18</td>
            <td>24</td>
            <td>30</td>
        </tr>
        <tr>
            <td style="text-align:left;">STRAIGHT</td>
            <td>6</td>
            <td>12</td>
            <td>18</td>
            <td>24</td>
            <td>30</td>
        </tr>
        <tr>
            <td style="text-align:left;">3 OFA KIND</td>
            <td>3</td>
            <td>6</td>
            <td>9</td>
            <td>12</td>
            <td>15</td>
        </tr>
        <tr>
            <td style="text-align:left;">TWO PAIR</td>
            <td>2</td>
            <td>4</td>
            <td>6</td>
            <td>8</td>
            <td>10</td>
        </tr>
        <tr>
            <td style="text-align:left;">JACKS OR BETTER</td>
            <td>1</td>
            <td>2</td>
           ...

CSS

.cards { 
    display: block; 
    width: 84px; 
    height: 122px;  
    background-repeat: no-repeat;
    border: 3px solid #a1a1a1;
    border-radius: 10px;
}

.keepDropLabel { 
    display: block; 
    width: 84px; 
    height: 25px;  
    background-repeat: no-repeat;
    border: 3px solid #a1a1a1;
    border-radius: 10px;
}

.gameInterface {
    text-align: center;
    width: 460px; 
    border: 3px solid #a1a1a1;
    background-color: #00ff00;
}

#oddsLegend {
}

#cardArea {
}

#controlsAndStats {
}

#payoutTable {
    width: 100%;
    border: 5px solid black;
    text-align: right;
    background-color: #cccccc;
}

#payoutTable td {
    border: 2px solid black;
}


#controlTable {
    width: 100%;
    border: 2px solid black;
    text-align: right;
}

#controlTable td {
    border: 2px solid black;
}

.controlButton { 
    width: 140px; 
}

JavaScript

$ (init);

$('#deal').click(function () {
dealHand();    
});

$('#bet1').click(function () {
increaseBet(1);    
});


$('#C0').click(function () {
toggleHold(0);    
});

$('#C1').click(function () {
toggleHold(1);
});

$('#C2').click(function () {
toggleHold(2);
});

$('#C3').click(function () {
toggleHold(3);
});

$('#C4').click(function () {
toggleHold(4);
});

var debugFlag = false;

var credits = 100;
var bet     = 0;
var mode    = 0;  // 0 = deal, 1 = draw, 2 = new hand
var resultText = "&nbsp;";


var cardDeckImage  = "url(http://jtpandelos.com/images/carddeck-small.png)";
var cardDeckImageX = 84;
var cardDeckImageY = 122;

//  The 'cards' data structure represents the data needed for anunsorted
// deck of cards,  this array should be constant and all follow on data 
// structure reference an index intothisdata structure
var cards       = new Array();

// The 'cardsInDeck' data structrue is a list of indices into the 'cards'
// data structure that represents all of the remamining card in a deck
var cardsInDeck = new Array();

// Define an 'object' to contain information needed to specify a 
// particular card,including display offset and description
function Card(name, image, xIndex, yIndex)
{
    this.name     = name;
    this.image    = image;
    this.xIndex   = xIndex;
    this.yIndex   = yIndex;
    this.position = "-" + ( xIndex * cardDeckImageX ) + "px -" + ( yIndex * cardDeckImageY ) + "px";
};

cards[0]  = new Card('Ace of Clubs',      cardDeckImage,  0, 0);  cardsInDeck[0]  = 0;
cards[1]  = new Card('Two of Clubs',      cardDeckImage,  1, 0);  cardsInDeck[1]  = 1;
cards[2]  = new Card('Three of Clubs',    cardDeckImage,  2, 0);  cardsInDeck[2]  = 2;
cards[3]  = new Card('Four of Clubs',     cardDeckImage,  3, 0);  cardsInDeck[3]  = 3;
cards[4]  = new Card('Five of Clubs',     cardDeckImage,  4, 0);  cardsInDeck[4]  = 4;
cards[5]  = new Card('Six of Clubs',      cardDeckImage,  5, 0);  cardsInDeck[5]  = 5;
cards[6]  = new Card('Seven of Clubs', ...