TIC-TAC-TOE.HTML

Fixed a bug in ai_play(): index3 was being assigned incorrect values causing the omission of many possible moves by the computer. I also discovered having ai_play() try to win and prevent the opponent from doing the same was not simple. The function now only tries to prevent the opponent from winning. Also, it now only looks 2 moves into the future, looking too far ahead was causing it to fail in its goal.
The computer player should now be harder to beat than it was in version 1. The user interface was modified to prevent players from forgetting weather they are playing with an 'x' or an 'o'.
<html>
<head>
<title>tic tac toe</title>

<script>
function create_tic_tac_toe_ai_array()
         {
         ai_array = new Array(9);

         for(var index = 0; index < ai_array.length; index++)
            {
            ai_array[index] = new Array(ai_array.length - index);
            for(var index2 = 0; index2 < ai_array[index].length; index2++)
                ai_array[index][index2] = index2;
            }

         return(ai_array);
         }

function randomise_ai_array(tic_tac_toe_ai_array)
         {
         for(var index = 0; index < tic_tac_toe_ai_array.length; index++)
            for(var index2 = 0; index2 < tic_tac_toe_ai_array[index].length; index2++)
               {
               temp = tic_tac_toe_ai_array[index][index2];
               rand = parseInt(Math.random() * tic_tac_toe_ai_array[index].length);
               tic_tac_toe_ai_array[index][index2] = tic_tac_toe_ai_array[index][rand];
               tic_tac_toe_ai_array[index][rand] = temp;
               }
         }

function create_tic_tac_toe()
         {
         this.Letter = '';
         this.Play = -1;
         }

function create_tic_tac_toe_array()
         {
         game_array = new Array(9);

         for(var index = 0; index < ai_array.length; index++)
             game_array[index] = new create_tic_tac_toe();

         return(game_array);
         }

function next_available_square(tic_tac_toe_array, square)
         {
         available_square = 0;

         for(index = 0; index <= square; index++)
            {
            while(tic_tac_toe_array[available_square].Letter != '')
                 {
                 available_square++;
                 }

            if(index < square)
               available_square++;
            }

         if(available_square < 0 || available_square > 8)
            alert('oh my god available_square = ' + available_square);

         return(available_square);
         }

function ai_play(tic_tac_toe_array, tic_tac_toe_ai_array, turn_number, trial_number)
         {
         for(var index = turn_number + trial_number; index < tic_tac_toe_ai_array.length; index++)
            {
            //Each increment in this loop is a possible move.
            for(var index2 = 0; index2 < tic_tac_toe_ai_array[index].length; index2++)
               {
               take_back_moves(tic_tac_toe_array, turn_number + trial_number);

               index3 = next_available_square(tic_tac_toe_array, tic_tac_toe_ai_array[index][index2]);

               trial_move(tic_tac_toe_array, index3, next_letter(tic_tac_toe_array));

               if(win(tic_tac_toe_array, Player_Letter()) == true)
                 {
                 return(1);
                 }

               if(turn_number + trial_number + 1 == tic_tac_toe_array.length)
                 {
                 return(0);
                 }

               if(trial_number < 2)
                 {
                 return_value = ai_play(tic_tac_toe_array, tic_tac_toe_ai_array, turn_number, trial_number + 1);

                 take_back_moves(tic_tac_toe_array, turn_number + trial_number + 1);

                 if((return_value != 1 && next_letter(tic_tac_toe_array) == Player_Letter()) ||
                   (index2 == tic_tac_toe_ai_array[index].length - 1))
                    return(return_value);
                 }
               }
            }
         }

function Computer_Letter()
         {
         return(computer_letter);
         }

function Player_Letter()
         {
         return(player_letter);
         }

function play()
         {
         if(turn == Computer_Letter())
            document.tic_tac_toe.message.value = 'My turn (' + Computer_Letter() + ')';
         else
            document.tic_tac_toe.message.value = 'Your turn (' + Player_Letter() + ')';

         if(win(tic_tac_toe, Computer_Letter()) == false &&
            win(tic_tac_toe, Player_Letter()) == false &&
            tied(tic_tac_toe) == false)
           {
           if(turn == Computer_Letter())
             {
             ai_play(tic_tac_toe, ai_array, move_number(tic_tac_toe), 0);
             turn = Player_Letter();
             }

           setTimeout('play();', 1000);
           }

         if(win(tic_tac_toe, Computer_Letter()))
           {
           document.tic_tac_toe.message.value = 'I win';
           }

         if(win(tic_tac_toe, Player_Letter()))
           {
           document.tic_tac_toe.message.value = 'you win';
           }

         if(tied(tic_tac_toe))
           {
           document.tic_tac_toe.message.value = 'we tied';
           }
         }

function move_number(tic_tac_toe_array)
         {
         latest_move = 0;
         for(var index = 0; index < tic_tac_toe_array.length; index++)
            {
            if(tic_tac_toe_array[index].Play >= latest_move)
               latest_move = tic_tac_toe_array[index].Play + 1;
            }

         return(latest_move);
         }

function next_letter(tic_tac_toe_array)
         {
         last_position = 0;
         for(var index = 0; index < tic_tac_toe_array.length; index++)
            {
            if(tic_tac_toe_array[index].Play > tic_tac_toe_array[last_position].Play)
               last_position = index;
            }

         if(tic_tac_toe_array[last_position].Letter == Computer_Letter())
            return(Player_Letter());
         else
            return(Computer_Letter());
         }

function user_move(square, Letter)
         {
         if(tic_tac_toe[square].Letter == '' && turn == Player_Letter())
           {
           move(tic_tac_toe, square, Letter);
           turn = Computer_Letter();
           document.tic_tac_toe.message.value = 'My turn (' + Computer_Letter() + ')';
           }
         }

function move(tic_tac_toe_array, square, Letter)
         {
         tic_tac_toe_array[square].Letter = Letter;
         tic_tac_toe_array[square].Play = move_number(tic_tac_toe_array);
         eval('document.tic_tac_toe.square' + square + '.value = \'' + Letter + '\'');
         }

function trial_move(tic_tac_toe_array, square, Letter)
         {
         if(square < tic_tac_toe_array.length)
           {
           tic_tac_toe_array[square].Letter = Letter;
           tic_tac_toe_array[square].Play = move_number(tic_tac_toe_array);
           eval('document.tic_tac_toe.square' + square + '.value = \'' + Letter + '\'');
           }
         }

function take_back_moves(tic_tac_toe_array, Play)
         {
         for(var index = 0; index < tic_tac_toe_array.length; index++)
            {
            if(tic_tac_toe_array[index].Play >= Play)
              {
              tic_tac_toe_array[index].Letter = '';
              tic_tac_toe_array[index].Play = -1;
              eval('document.tic_tac_toe.square' + index + '.value = \'\'');
              }
            }
         }

var ai_array;
var tic_tac_toe;
var turn;
var computer_letter;
var player_letter;

function new_game()
         {
         if(Math.random() < 0.5)
           {
           computer_letter = 'x';
           player_letter = 'o';
           }
         else
           {
           computer_letter = 'o';
           player_letter = 'x';
           }

         if(Math.random() < 0.5)
            turn = Computer_Letter();
         else
            turn = Player_Letter();

         randomise_ai_array(ai_array);

         take_back_moves(tic_tac_toe, 0);
         }

function init()
         {
         ai_array = create_tic_tac_toe_ai_array();
         tic_tac_toe = create_tic_tac_toe_array();

         new_game();

         play();
         }

function win(tic_tac_toe_array, Letter)
         {
         //First row, first column, and diagonal.
         if(tic_tac_toe_array[0].Letter == Letter)
           {
           if(tic_tac_toe_array[1].Letter == Letter && tic_tac_toe_array[2].Letter == Letter)
              return(true);
           if(tic_tac_toe_array[3].Letter == Letter && tic_tac_toe_array[6].Letter == Letter)
              return(true);
           if(tic_tac_toe_array[4].Letter == Letter && tic_tac_toe_array[8].Letter == Letter)
              return(true);
           }

         //Second row, second column, and other diagonal.
         if(tic_tac_toe_array[4].Letter == Letter)
           {
           if(tic_tac_toe_array[3].Letter == Letter && tic_tac_toe_array[5].Letter == Letter)
              return(true);
           if(tic_tac_toe_array[1].Letter == Letter && tic_tac_toe_array[7].Letter == Letter)
              return(true);
           if(tic_tac_toe_array[2].Letter == Letter && tic_tac_toe_array[6].Letter == Letter)
              return(true);
           }

         //Third row and third column.
         if(tic_tac_toe_array[8].Letter == Letter)
           {
           if(tic_tac_toe_array[6].Letter == Letter && tic_tac_toe_array[7].Letter == Letter)
              return(true);
           if(tic_tac_toe_array[2].Letter == Letter && tic_tac_toe_array[5].Letter == Letter)
              return(true);
           }

         return(false);
         }

function tied(tic_tac_toe_array)
         {
         if(win(tic_tac_toe_array, Player_Letter()) == false &&
            win(tic_tac_toe_array, Computer_Letter()) == false)
           {
            for(var index = 0; index < tic_tac_toe_array.length; index++)
                if(tic_tac_toe_array[index].Letter == '')
                   return(false);

           return(true);
           }

         return(false);
         }</script>
</head>

<body onload="init();">

<form name="tic_tac_toe">
<table>
<tr>
<td colspan="3" align="center">
<input type="text" size="9" name="message" style="border:none; text-align:center;" /></td>
</tr>

<tr>
<td>
<input type="text" size="1" name="square0" readonly
       onclick="user_move(0, Player_Letter());" /></td>
<td align="center">
<input type="text" size="1" name="square1" readonly
       onclick="user_move(1, Player_Letter());" /></td>
<td align="right">
<input type="text" size="1" name="square2" readonly
       onclick="user_move(2, Player_Letter());" /></td>
</tr>

<tr>
<td>
<input type="text" size="1" name="square3" readonly
       onclick="user_move(3, Player_Letter());" /></td>
<td align="center">
<input type="text" size="1" name="square4" readonly
       onclick="user_move(4, Player_Letter());" /></td>
<td align="right">
<input type="text" size="1" name="square5" readonly
       onclick="user_move(5, Player_Letter());" /></td>
</tr>

<tr>
<td>
<input type="text" size="1" name="square6" readonly
       onclick="user_move(6, Player_Letter());" /></td>
<td align="center">
<input type="text" size="1" name="square7" readonly
       onclick="user_move(7, Player_Letter());" /></td>
<td align="right">
<input type="text" size="1" name="square8" readonly
       onclick="user_move(8, Player_Letter());"  /></td>
</tr>

<tr>
<td colspan="3"><input type="button" value="new game"
                       onclick="new_game();
                                play();" /></td>
</tr>
</table>
</form>
</body>
</html>