Picking up where we left off in the Arrays section, we use our shuffled deck to deal a five-card video poker hand. We also display the images for our five cards.

There's not much new in programming techniques here, but we are setting up the foundation for the next steps. One point of interest is how we can de-reference a variable by using array notation for objects:
document[vCardImg].src resolves into document.CardImg0.src, document.CardImg1.src, etc., as the loop ticks through.

Click on the menu-bar to reload this page and see the hand re-deal.

Card images from Oxymoron.

<script language="JavaScript" type="text/javascript">
<!--

// define the contructor for Card objects
function Card(s, r, c) {
 this.suit = s ;
 this.rank = r ;
 this.color = c ;
}

// define a copy function for cards
function CopyCard(cardfrom, cardto) {
  for (i in cardfrom)
    cardto[i] = cardfrom[i] ;
}

// define a swap function for cards
function SwapCard(c1, c2) {
var c0 = new Card(null, null, null) ;
  CopyCard(c1, c0) ;
  CopyCard(c2, c1) ;
  CopyCard(c0, c2) ;
}

// define a write method for the cards
function WriteCard() {
  document.write("<b>" + this.rank + "</b> of ") ;
  document.write("<font color=" + this.color + ">") ;
  document.write("<b>" + this.suit + "</b><br>") ;
  document.write("</font>") ;
}

// define a shuffle method for the deck
function ShuffleCards() {
var i = 0 , r1 = 0 ;
  for (i = 0 ; i < this.length ; i++ ) {
    r1 = Math.floor(Math.random() * this.length) ;
    SwapCard(this[i], this[r1]) ;
  }
}

// extend the definition of cards by adding a new method
Card.prototype.write = WriteCard ;

// extend the definition of arrays by adding a new method
Array.prototype.shuffle = ShuffleCards ;


var vRank = null ; var vSuit = null ; var vColor = null ;
	
// create and initialize our deck	
var Deck = new Array(52) ;

for (i = 0 ; i < 52 ; i++ ) {

  switch (Math.floor(i / 13) ) {
    case 0: vSuit = "Spades" ; vColor = "black" ; break ;
    case 1: vSuit = "Hearts" ; vColor = "red" ; break ;
    case 2: vSuit = "Diamonds" ; vColor = "red" ; break ;
    case 3: vSuit = "Clubs" ; vColor = "black" ; break ;
    default: vSuit = "Error" ; vColor = "green" ; break ;						
  } 

  switch (i % 13) {
    case 0: vRank = "Ace" ; break ;
    case 1: vRank = "Two" ; break ;
    case 2: vRank = "Three" ; break ;
    case 3: vRank = "Four" ; break ;
    case 4: vRank = "Five" ; break ;
    case 5: vRank = "Six" ; break ;
    case 6: vRank = "Seven" ; break ;
    case 7: vRank = "Eight" ; break ;
    case 8: vRank = "Nine" ; break ;
    case 9: vRank = "Ten" ; break ;
    case 10: vRank = "Jack" ; break ;
    case 11: vRank = "Queen" ; break ;
    case 12: vRank = "King" ; break ;
    default: vRank = "Error" ; break ;						
  } 
  Deck[i] = new Card(vSuit, vRank, vColor) ;
}	

Deck.shuffle() ;

// create our poker hand
var Hand = new Array(5) ;
var vCardImg = null , vCardSrc = null ;

// deal the top five cards, and write out the hand
for (i = 0 ; i < 5 ; i++ ) {
  Hand[i] = new Card(Deck[i].suit, Deck[i].rank, Deck[i].color) ;
  Hand[i].write();
}

// now show it graphically 
document.write("<br><br>") ;
document.write("<center><table border=0 cellpadding=5 cellspacing=2><tr>") ;

for (i = 0 ; i < 5 ; i++ ) {
  vCardImg = "CardImg" + i ;
  vCardSrc = "graphics/cards/" + Hand[i].rank + Hand[i].suit + ".gif"

  // start with the card back
  document.write("<td align=center valign=top>") ;
  document.write("<img name=" + vCardImg + " src='graphics/cards/b.gif' border=0>") ;
  document.write("</td>") ;
	
  // then set the card image
  // later, when we add things like re-deal buttons, this will make more sense
  document[vCardImg].src = vCardSrc ;
}

document.write("</tr></table></center>") ;


//-->
</script>