JavaScript Card Objects

This article shows how user-defined JavaScript objects can be implemented and used in a web page. Part of the example here also makes use of CSS and DHTML but the main focus is on creating and using objects in JavaScript.

Overview

The assumption is that our objects will be used to implement some card games in JavaScript. To provide basic functionality we'll define two objects, Card and Stack.

The Card object will be used to represent individual playing cards while the Stack object will represent a set of cards, which individual cards can be added to or removed from. The Stack object will be designed so it can act as a full deck of cards or as smaller sets of cards like individual player hands or a discard pile.

Ranks and Suits

A standard pack of cards contains thirteen cards of different ranks (ace, 2, 3, ... 10, jack, queen and king) in each of four suits (clubs, diamonds, hearts and spades).

To represent these values, a one or two character string will be used. For rank, the values are "A", "2", "3", ..., "10", "J", "Q" and "K" and for suits "C", "D", "H" and "S" are used. These values are seen throughout the code for the objects and can likewise be used in any script that needs to evaluate a card's value.

The Card Object

The first JavaScript object we'll create is the Card object. Below is the constructor function.

function Card(rank, suit) {

  this.rank = rank;
  this.suit = suit;

  this.toString   = cardToString;
  this.createNode = cardCreateNode;
}

As you can see, the card's rank and suit are saved as properties of the same name. Two methods are defined as well, toString() which will return the value of the card as a text string and createNode() which can be used for graphically display the card. This latter method is discussed in detail later on.

The toString() method is fairly simple to implement. The code is shown below.

function cardToString() {

  var rank, suit;

  switch (this.rank) {
    case "A" :
      rank = "Ace";
      break;
    case "2" :
      rank = "Two";
      break;
    case "3" :
      rank = "Three";
      break;
    case "4" :
      rank = "Four";
      break;
    case "5" :
      rank = "Five";
      break;
    case "6" :
      rank = "Six";
      break;
    case "7" :
      rank = "Seven";
      break;
    case "8" :
      rank = "Eight";
      break;
    case "9" :
      rank = "Nine";
      break;
    case "10" :
      rank = "Ten";
      break;
    case "J" :
      rank = "Jack"
      break;
    case "Q" :
      rank = "Queen"
      break;
    case "K" :
      rank = "King"
      break;
    default :
      rank = null;
      break;
  }

  switch (this.suit) {
    case "C" :
      suit = "Clubs";
      break;
    case "D" :
      suit = "Diamonds"
      break;
    case "H" :
      suit = "Hearts"
      break;
    case "S" :
      suit = "Spades"
      break;
    default :
      suit = null;
      break;
  }

  if (rank == null || suit == null)
    return "";

  return rank + " of " + suit;
}

Given the above, if you used this code,

  var myCard = new Card("3", "C");
  alert(myCard.toString());

the browser would display "Three of Clubs." In other words, it just spells out the rank and suit of the card. If either rank or suit are invalid, a null string is returned ("").

It's interesting to note all JavaScript objects have a default toString() method which is used internally for things like error messages or anytime an object is used in a string expression. Because of this you could also use just the variable name in the alert() call:

  alert(myCard);

Most built-in JavaScript objects have their own implementation of toString() which returns a suitable value for the object or data type the variable represents. For other objects it usually returns a string value in the form "[object]" or "[object type]." Defining our own toString() method let's us give a string value with more useful information.

Next