COP4813 Assignment 9 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 id  = "top" style = "text-align: center">
    <p>
       <input  type="button" value="Deal Hand" id="deal" />
       <input  type="button" value="Reset Deck / Hand" id="reset" />
    </p>
<br/>
</div>
<div class="playArea" style="text-align: center" id = "cardArea">Your Hand<br/>
  <table height="120" style="width:100%">
   <tr>
    <td><span class="cards" id="C0"></span></td> 
    <td><span class="cards" id="C1"></span></td> 
    <td><span class="cards" id="C2"></span></td>
    <td><span class="cards" id="C3"></span></td>
    <td><span class="cards" id="C4"></span></td>
   </tr>
  </table>
</div>
<div class="playArea" id="discardArea">Draggable Discard Area<br/>
  <table height="120" style="width:100%">
   <tr>
    <td><span class="cards" id="D0"></span></td> 
    <td><span class="cards" id="D1"></span></td> 
    <td><span class="cards" id="D2"></span></td>
    <td><span class="cards" id="D3"></span></td>
    <td><span class="cards" id="D4"></span></td>
   </tr>
  </table>
</div>
<div id="debugArea"></div><br/>
</body>

CSS

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

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

JavaScript

$ (init);

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

$('#reset').click(function () {
resetDeck();    
});

var debugFlag = false;

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',    cardDeckImage,  6, 0);  cardsInDeck[6]  = 6;
cards[7]  = new Card('Eight of Clubs',    cardDeckImage,  7, 0);  cardsInDeck[7]  = 7;
cards[8]  = new Card('Nine of Clubs',     cardDeckImage,  8, 0);  cardsInDeck[8]  = 8;
cards[9]  = new Card('Ten of Clubs',      cardDeckImage,  9, 0);  cardsInDeck[9]  = 9;
cards[10] = new Card('Jack of Clubs',     cardDeckImage, 10,...