InformIT: Sams Teach Yourself JavaScript in 24 Hours

Planning the Program

In this hour you'll create a JavaScript program that plays a game. It will be a casino-style draw poker game, although it won't cost you a penny to play. In the process you'll learn what it's like to create a complex JavaScript program, complete with graphics, user interaction, and complex calculations.

Creating Graphics

Because this is a card game, you will need graphics for each of the 52 cards in the deck. In case you're not an artist, I've made a set of cards available on this book's Web site at http://www.jsworkshop.com/. (When you look at them, you'll see that I'm not an artist either.)

Five cards will be displayed on the screen at the same time, so I used graphics files with a width of 106 and height of 136. This will allow the game to be played on a 640x480 monitor, and should also look good at other resolutions.

One of the main considerations in a program like this is the naming of the graphics files. Although names like Ten of Spades.gif are friendly to users, they would be difficult for the JavaScript interpreter to work with.

To make it easy for the script, I've named the files with the numbers 1–13 (Ace is 1; Jack, Queen, and King are 11, 12, and 13). The file names are simply this number plus a letter representing the suit (c, h, s, or d). As an example, the Jack of Clubs would be 11c.gif.

I've also created a title graphic, a Hold button to be displayed under each dealt card, and Deal and Draw buttons to control the gameplay.

Choosing Variables

The next step in planning the script is to choose the variables that will be used. You can add variables later, but choosing them beforehand helps you plan the way the script will store data.

The variables you'll need for this game include the following:

score— An integer representing the player's current score. This starts at 100. One point will be bet each time the cards are dealt, and the score will increase based on the poker hand's score.
dealt— A flag that you'll use to indicate that the cards have been dealt, and the player can now hold or draw cards.
hand— An array that stores the values of the five cards in the current hand.
held— An array of flags that indicate whether each card should be held or discarded.
deck— An array that stores the deck of 52 cards that will be shuffled and dealt from.

The following JavaScript code declares these global variables—it will be included in the header of the HTML document:

var score = 100;
var dealt = false;
var hand = new Array(6);
var held = new Array(6);
var deck = new Array(53);

To simplify data storage, you will next create an object that represents a card. This object will store the card's number, its suit, and a function to calculate the graphics filename to display the card. Here is the definition for the Card object:

// Make a filename for an image, given Card object
function fname() {
   return this.num + this.suit + ".gif";
}
// Constructor for Card objects
function Card(num,suit) {
   this.num = num;
   this.suit = suit;
   this.fname = fname;
}

This defines the fname function, which calculates the filename for a card, and the constructor function for the Card object. The deck and hand arrays will store a Card object for each card.

Creating the HTML Document

You should perform one more task before you do any actual scripting: design the HTML layout for the game. Listing 22.1 shows a basic layout, using an HTML table to align the cards and buttons.

Example 22.1. The HTML Document for the Game

<html>
<head>
<title>Draw Poker</title>
</head>
<body>
<img src="title.gif" width=381 height=81>
<hr>
<form NAME="form1">
<table>
<tr>
  <td> <img border=0 src="blank.gif" height=136 width=106>
  <td> <img border=0 src="blank.gif" height=136 width=106>
  <td> <img border=0 src="blank.gif" height=136 width=106>
  <td> <img border=0 src="blank.gif" height=136 width=106>
  <td> <img border=0 src="blank.gif" height=136 width=106>
  <td> </td>
</tr>
<tr>
  <td> <a href="#" onClick="Hold(1)">
       <img border=0 src="hold.gif" height=50 width=106></a>
  <td> <a href="#" onClick="Hold(2)">
       <img border=0 src="hold.gif" height=50 width=106></a>
  <td> <a href="#" onClick="Hold(3)">
       <img border=0 src="hold.gif" height=50 width=106></a>
  <td> <a href="#" onClick="Hold(4)">
       <img border=0 src="hold.gif" height=50 width=106></a>
  <td> <a href="#" onClick="Hold(5)">
       <img border=0 src="hold.gif" height=50 width=106></a>
</tr>
<tr>
  <td> <B>Total<BR>Score:</B>
       <input TYPE="TEXT" SIZE=6 NAME="total" VALUE="100"></td>
  <td colspan=2> <B>Current <BR>Hand:</B>
       <input TYPE="TEXT" SIZE=20 NAME="message"
        VALUE="Press DEAL to begin.">
  <td>
  <td> <a href="#" onClick="DealDraw()">
       <img border=0 src="deal.gif" height=50 width=106></a>
</tr>
</table>
</form>
</body>
</html>

Here's a breakdown of the HTML components used in this document:

The <table> tag starts an HTML table, which will line up the elements on the page.
The first <tr> section defines a row of the table that displays the five cards. A blank picture (blank.gif) is used as the source because no cards have been dealt yet.
The second <tr> section defines the second row of the table. This row contains Hold buttons for each card.
The third <tr> section defines the third row. This row includes text fields for the total score and the status of the current hand, as well as the Deal button (which will change into a Draw button after the cards are dealt).

Figure 22.1 shows the HTML document as displayed by Internet Explorer, before a game has started.

Figure 22.1 The completed HTML layout for the game.

Writing the Program | Next Section

Previous Section