Sams Teach Yourself JavaScript in 24 Hours

About the Game

Although it's possible to create just about any game with JavaScript, a card game is a simple choice because the graphics are easy to create and the gameplay is relatively simple. In this hour, you'll create a Poker Solitaire game using HTML, JavaScript, and a bit of CSS.

How to Play

Poker Solitaire is played on a five by five board. The deck of cards is shuffled, and you draw one card from the deck at a time and place it anywhere on the board. Your goal is to make each column, row, and diagonal row form the best possible poker hand. For example, in Figure 22.1, several cards have been placed on the board and the score for the completed column and row is shown.

Figure 22.1. Playing Poker Solitaire.

[View full size image]

Scoring

Because there are no other players, the game will be scored. The script will calculate the score for each column, row, and diagonal on the board, and combine them for a total score. Points are awarded for poker hands, with more difficult (and less likely) combinations scoring higher:

• Pair1 point (Two cards of the same number and different suits)

• Two pair2 points (Two pairs)

• Three of a kind3 points (Three cards of the same number)

• Straight4 points (Five cards in numeric sequence)

• Full house8 points (One pair plus three of a kind)

• Four of a kind25 points (All four cards of the same number)

• Flush5 points (Five cards of the same suit)

• Straight flush50 points (Five cards of the same suit, in sequence)

• Royal flush250 points (10, Jack, Queen, King, and Ace of the same suit)

In the JavaScript version of the game, the score for each row or column will be displayed as you complete it, and the total score will be updated in real time as you place each card on the board.

Creating Graphics

This game will require some graphicsyou'll need 52 images, one for each card in a standard deck. One more image, blank.gif, will be used to mark the spaces on the board that don't yet contain cards. You can download all of the graphics for the game from this book's website.

All of the graphics will be the same size, including the blank space image. The board will consist entirely of blanks at the start of a game, and images will be switched to the appropriate card when the user clicks to place a card. The images I used in the example are all 53 x 68 pixels.

When you're working with a large number of graphics, filenames become important. It will make coding easier if you decide in advance on a naming scheme for the images. In this case, the filenames will include a number for the card's rank (113, with 1 representing Ace, and 11, 12, and 13 representing Jack, Queen, and King) and a letter for the suit. For example, the Seven of Hearts image would be 7h.gif, and the Queen of Spades would be 12s.gif.