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.