My Little Scripts - tic-tac-toe.html

Scripts.com - Get the best scripts NOW!
HotScripts.com - Over 10 web rings.
more links...
Index News Samples Downloads E-Mail me Forum Sign Up
TIC-TAC-TOE.HTML

Welcome to my tic tac toe page. This is the first time that I have tried to implement artificial intelligence on a web application. Due to the nature of AI programming, this page will probably undergo various revisions. I look forward to reading your comments.

see also : wheel-of-fortune.php, tic-tac-toe.html
<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 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);

               //Find the n'th available square.
               for(var index3 = tic_tac_toe_ai_array[index][index2];
                   index3 < tic_tac_toe_array.length && tic_tac_toe_array[index3].Letter != '';
                   index3++);

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

               if(win(tic_tac_toe_array, Player_Letter()) == false && trial_number > 0)
                 {
                 return(0);
                 }

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

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

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

               //I commented this out because I think it's not working properly.
               /*if(Out_of_Moves(tic_tac_toe_ai_array[index], tic_tac_toe_array, index2, index3))
                 {
                 return(0);
                 }*/

               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) || (index2 == tic_tac_toe_ai_array[index].length - 1))
                 {
                 return(return_value);
                 }
               }
            }
         }

function Out_of_Moves(tic_tac_toe_ai_row, tic_tac_toe_array, current_index, square)
         {
         //Checks if future moves are redundant.
         previous_largest_index = 0;

         for(var index = 0; index < current_index; index++)
            {
            for(var index2 = tic_tac_toe_ai_row[index];
                index2 < tic_tac_toe_array.length && tic_tac_toe_array[index2].Letter != '';
                index2++);
                if(index2 > previous_largest_index)
                   previous_largest_index = index2;
            }

         for(index = current_index; index < tic_tac_toe_ai_row.length; index++)
            {
            if(tic_tac_toe_ai_row[index] >= square)
               return(false);
            }

         if(previous_largest_index < square)
            return(false);

         return(true);
         }

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';
         else
            document.tic_tac_toe.message.value = 'Your turn';

         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';
           }
         }

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 = Player_Letter();
         else
            turn = Computer_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, Player_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>