Creating the HTML Document
The HTML document for the game is straightforward. In keeping with the unobtrusive scripting strategies you've learned in previous hours, it contains no JavaScriptjust a <script> tag that imports a script that will handle the game. Similarly, a separate CSS file will be used for styles. Listing 22.1 shows the HTML document.
Listing 22.1. The HTML Document for the Poker Solitaire Game
<html>
<head>
<title>Poker Solitaire</title>
<script language="JavaScript" type="text/javascript"
src="pokersol.js">
</script>
<link rel="stylesheet" type="text/css" href="pokersol.css">
</head>
<body>
<table>
<tr>
<td colspan="2"><h1>Poker Solitaire</h1></td>
<td> <img id="card1" src="blank.gif" height="68" width="53"> </td>
<td> <img id="card2" src="blank.gif" height="68" width="53"> </td>
<td> <img id="card3" src="blank.gif" height="68" width="53"> </td>
<td> <img id="card4" src="blank.gif" height="68" width="53"> </td>
<td> <img id="card5" src="blank.gif" height="68" width="53"></td>
<td class="score" id="row0"> </td>
</tr>
<tr>
<td> <img id="dcard" border="0"
src="blank.gif" height="68" width="53"></td>
<td> </td>
<td> <img id="card6" src="blank.gif" height="68" width="53"></td>
<td> <img id="card7" src="blank.gif" height="68" width="53"></td>
<td> <img id="card8" src="blank.gif" height="68" width="53"></td>
<td> <img id="card9" src="blank.gif" height="68" width="53"></td>
<td> <img id="card10" src="blank.gif" height="68" width="53"></td>
<td class="score" id="row1"> </td>
</tr>
<tr>
<td valign="top" id="status"> Next Card</td>
<td> </td>
<td> <img id="card11" src="blank.gif" height="68" width="53"></td>
<td> <img id="card12" src="blank.gif" height="68" width="53"></td>
<td> <img id="card13" src="blank.gif" height="68" width="53"></td>
<td> <img id="card14" src="blank.gif" height="68" width="53"></td>
<td> <img id="card15" src="blank.gif" height="68" width="53"></td>
<td class="score" id="row2"> </td>
</tr>
<tr>
<td id="total"> <b>Total Score:</b>
<div id="totalscore">0</div></td>
<td> </td>
<td> <img id="card16" src="blank.gif" height="68" width="53"></td>
<td> <img id="card17" src="blank.gif" height="68" width="53"></td>
<td> <img id="card18" src="blank.gif" height="68" width="53"></td>
<td> <img id="card19" src="blank.gif" height="68" width="53"></td>
<td> <img id="card20" src="blank.gif" height="68" width="53"></td>
<td class="score" id="row3"> </td>
</tr>
<tr>
<td> <a id="newgame" href="#"><b>Start Over</b></a></td>
<td> </td>
<td> <img id="card21" border=0 src="blank.gif" height=68 width=53></td>
<td> <img id="card22" border=0 src="blank.gif" height=68 width=53></td>
<td> <img id="card23" border=0 src="blank.gif" height=68 width=53></td>
<td> <img id="card24" border=0 src="blank.gif" height=68 width=53></td>
<td> <img id="card25" border=0 src="blank.gif" height=68 width=53></td>
<td class="score" id="row4"> </td>
</tr>
<tr>
<td> </td>
<td class="score" id="diag1"> </td>
<td class="score" id="col0"> </td>
<td class="score" id="col1"> </td>
<td class="score" id="col2"> </td>
<td class="score" id="col3"> </td>
<td class="score" id="col4"> </td>
<td class="score" id="diag2"> </td>
</table>
</body>
</html>
|
The game board is laid out using an HTML table. Although the game board is five by five squares, the table contains eight columns and six rows. The leftmost column will be used for displaying the next card and the score, as well as a Start Over link. The remaining columns and rows will be used to display the score for each column and row as they are filled with cards.
The 25 spaces on the board are given unique id values, card1 tHRough card25. These will be used by the script to determine which card the user clicks on, and also to replace the appropriate image when a card is placed. The table cells for displaying scores are given the id values row0-4, col0-4, diag1, and diag2.
Save the HTML document in a folder, or download it from this book's website. You can load it into a browser to see the game layout, as shown in Figure 22.2. The game won't be playable until you add the script you'll develop in the next section.
|
