No dimensions are specified for the table or its constituent cells so they collapse around the graphics.

CODE

The full PHP page is zipped up along with the graphics in oxo.zip. There are plenty of comments in the source code. There is no client-side scripting - no JavaScript.

SETTING UP THE GAME BOARD

Name-value pairs from the HTTP query string are available in PHP code without code to extract the values. In the case of the url string

http://www.chrispearson.org/pages/programming/php/oxo/default.php?Cell=8&txtBoard=EEEEEEEEE

the value of Cell is available in the PHP variable $Cell and of txtBoard in $txtBoard.

Once a game is in progress the value assigned to Cell represents to cell in the game-board matrix clicked by the user - The cell into which we'll place a nought. The nine cells are identified from zero through to eight, as shown below. When the New Game button is clicked the form's POST action returns a query string with Cell=9 indicating that a new game has been requested.

All references to individual cells are made using these index numbers. The other parameter passed in the query string, txtBoard, is a nine-character string representing the status of each cell - E representing an empty, available location with X and O indicating cells already taken by a player. When the game begins the string is initialised to EEEEEEEEE,

$txtBoard = "EEEEEEEEE";

With the new board set up in code the new board must also be set up for the browser display: In a loop for each of the cells from 0 to 8 an image is specified together with a short text message which will be placed into the images alt text attribute. The image is also used as a link back to the same page.

for ($i = 0; $i < 9; $i++) {
   $Image[] = "40x40.gif";
   $Message[] = "Click to place your O";
   $Link[] = "default.php?Cell=" . $i . "&amp;txtBoard=" . $txtBoard;

The link contains the parameters Cell and txtBoard, allowing the page to process the user's move and to respond to it. Using the format $arrayname[] = x is a quick and dirty way to add elements to a PHP array. (There is an article on using arrays in PHP which covers assignment of arrays and other topics at array.asp.)

Each of these assignments is to an array, the code $Image[] = "40x40.gif" puts the string 40x40.gif into the next available element of the array $Image. The elements of these arrays are used later to write out the HTML to display the game board:

<tr>
<td class="topleft">
   <a href="<?=$Link[0]?>">
      <img src="<?=$Image[0]?>" alt="<?=$Message[0]?>" width="40" height="40" border="0" />
   < /a>
< /td>
<td class="top">
   <a href="<?=$Link[1]?>">
      <img src="<?=$Image[1]?>" alt="<?=$Message[1]?>" width="40" height="40" border="0" />
   < /a>
< /td>
<td class="topright">
   <a href="<?=$Link[2]?>">
      <img src="<?=$Image[2]?>" alt="<?=$Message[2]?>" width="40" height="40" border="0" />
   < /a>
< /td>
</tr>

This is the code assigning images, alt text and links to the top row of the game board. This shows how PHP output can be quickly and effectively embedded into HTML. The syntax of <?=$Image[2]?> is <?=, meaning this is PHP, output the variable $Image[2], ?> end of PHP. (This is directly equivalent to <% =variable %> in VBScript) Like its counterpart in VBScript it can appear anywhere in HTML - inside quotes, even - and will be properly processed. (NOT, however, when it appears in HTML comments!)

PROCESSING A MOVE

Since only empty cells on the game board are rendered as hyperlinks (previously-filled squares have appropriate alt text and no link) only valid moves can be returned to the server.

Each link includes the url of the noughts and crosses page together with a string representing the current board and the identity of the cell the player has clicked.

Arrays of images, alt text and links are created and used to create HTML on the fly when the PHP page is served.

The resulting HTML is similar to that shown here, on the right.

Try View=>Source on default.php to examine the HTML produced.

Once a move is received from the player a number of functions are called to process the move in accordance with the game-play rules, as described below.

Once the move has been processed - and any possible response has been made - the board is written as an HTML table containing blank, X and O graphics and the page re-served. Again, these steps are fully commented in the source code.

ScoreRow() gives the passed row a score based on how many O's or X's there are in a row and how they are mixed, together with any empty cells on that row. The scores are set such that a win (three of ours in a row) will clearly be the best move to make and any move resulting in three-in-a-row for the opponent is the worst case. Changing the score for a given symbol combination can have a significant effect on how PHP plays the game.

Setting the scores in minimax and other outcome-scoring applications is all part of the fine tuning process. Small changes can have major impacts.

On the right here is the switch() used in the ScoreRow() function in the current version of the game application: A win for the opposition (the first case) scores minus 2500 while a win for us (about half way down) scores plus 2500.

These scores have been chosen to mask any of the other conditions since win or loose are both terminal cases.

In the code snippet opposite the switch variable, $Row, contains a nine character representation of the game board, $TheirSymbol is the opponent's symbol (O in this case) playing against $OurSymbol, X here.

The hard-coded E is the character representing an empty cell on the game board.

The board position - the nine-character string representing the board - is used as the key to an array element with the element's value being set to that board's score.

After all the moves are evaluated the program performs a sort by descending value on the array, the key of the first element in the sorted array contains the result of the highest scoring move.

The scores are sorted highest-scoring to lowest scoring using the code

arsort($Score);

Then the first value is popped from the array using each()

$BestRow = each($Score);

All that remains is to call CheckWin() again, this time to check whether X has won the game.

The formatted board is then re-served to the client.

(There is no check after X makes a move and before possible responses by O to see whether X has won - There is a small processing overhead but the programming is simpler.)