Bookmark and Share

JavaScript Card Objects

See the card display demo.

The node returned corresponds to a string of HTML. Combined with the proper CSS rules it will render as a fairly decent graphic representation of a playing card. For example, the HTML for the 3♠ card would look like this:

<div class="card">
  <div class="front">
    <div class="index">3<br />&spades;</div>
    <div class="spotB1">&spades;</div>
    <div class="spotB3">&spades;</div>
    <div class="spotB5">&spades;</div>

and appear on the page like this.


The node returned by the method reflects the outer DIV tag. This node can be used just like any other DIV element node in a page. Should the card have an invalid rank or suit value, the node returned will appear as a blank-faced card.


Some images are required for face cards and the card back. To help speed things up, the following code is included to preload the necessary graphics.

var cardImg0 = new Image(); cardImg0.src= "graphics/cardback.gif";
var cardImg1 = new Image(); cardImg1.src= "graphics/jack.gif";
var cardImg2 = new Image(); cardImg2.src= "graphics/queen.gif";
var cardImg3 = new Image(); cardImg3.src= "graphics/king.gif";

Using Card Nodes

These nodes can be added to a page using any of several DOM methods. For example:

var deck, card;

deck = new Stack();
card = deck.deal();


Note that appendChild(), like similar DOM methods, inserts a copy of the given node into the document and returns a reference to that copy. In order to access the card node once it's been added to the page you need to save this reference. Then you can easily locate and remove it if desired.

var node;


// Add to page.

node = document.appendChild(card.createNode());


// Remove from page.


Face Down Cards

The outer DIV of the card node uses a graphic background to represent the back of a playing card. This is normally overlaid by the inner DIV which represents the card's front. But you can access this DIV element from the card node and change its visibility style to "flip" the card over and make it appear to be face down.

node = document.appendChild(card.createNode());


// Face down.

node.firstChild.style.visibility = "hidden";


// Face up.

node.firstChild.style.visibility = "";

The display demo illustrates some of these techniques for working with card nodes using the same basic concept as the previous demo.


The JavaScript code, style definitions and images can be viewed and copied here. See the demos for examples of use.


By defining your own objects in JavaScript you can create abstract data types to represent just about anything. This allows you to simplify your program designs by encapsulating complex code into simple properties and method calls. Objects are also easier to reuse, modify or expand on.

For fun you can try this Blackjack game, made using the objects discussed here. Details on the coding behind it can be found in a separate article.