We have combined our Card data type with our array shuffler to create an auto-shuffling deck of cards. If you have been following our previous examples, you'll recognize what we're doing here.

Having defined a new data type, we need some support functions to do simple manipulations such as copying one card to another and swapping two cards. Since these take two arguments, they are functions rather than methods. However, we have defined a method for writing out a card and assigned it to the card prototype. We also have defined a method of shuffling an array of cards and assigned it to the array prototype.

Having done all the background work, we define an array, create a card in each index and initialize the cards. Now all we have to do is print out the original array, shuffle it (one line of code!) and print out the shuffled array. At this point, most of the code is printing the framing table.

I assume it would be possible to define the Deck as a datatype and wrap the initialization code into it as a method. But we're working into this one step at a time.

Click on the menu-bar to reload this page and see the deck re-shuffle.

<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) ;
}	

// create framing table
document.write("<table border=0 cellpadding=5 cellspacing=2><tr>") ;
document.write("<td align=center valign=top bgcolor=#cccccc>Original deck</td>") ;
document.write("<td align=center valign=top bgcolor=#cccccc>Shuffled deck</td>") ;
document.write("</tr><tr>") ;
document.write("<td align=left valign=top>") ;

// write out the original deck in the first table cell
for (i = 0 ; i < 52 ; i++ ) {
  if ( i % 13 == 0 ) 
    document.write("<br>") ;
  Deck[i].write();
}	

// write framing table cells
document.write("</td><td align=left valign=top>") ;

// shuffle the deck
Deck.shuffle() ; 

// write out the shuffled deck
for (i = 0 ; i < 52 ; i++ ) {
  if ( i % 13 == 0 )
    document.write("<br>") ;
  Deck[i].write() ;
}	

// close framing table
document.write("</td></tr></table>") ;

//-->
</script>