SAMPLE.HTML

AI tree levels :

tic-tac-toe.js artificial-intelligence.js sample.html

TIC-TAC-TOE.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tic-tac-toe</title>

<script language="javascript" type="text/javascript" src="tic-tac-toe.js"></script>
<script language="javascript" type="text/javascript" src="artificial-intelligence.js"></script>
<script language="javascript" type="text/javascript" src="interface.js"></script>

<style>
#tic-tac-toe-11, #tic-tac-toe-12, #tic-tac-toe-13,
#tic-tac-toe-21, #tic-tac-toe-22, #tic-tac-toe-23,
#tic-tac-toe-31, #tic-tac-toe-32, #tic-tac-toe-33
{
width:40px; height:40px;
margin:2px 2px 2px 2px;
readonly:true;
text-align:center;
}

#restart,#replay, .levels
{
vertical-align:top;
margin-left:25px;
margin-top:5px;
}
</style>

</head>

<body onload="start();">
<input id="tic-tac-toe-11" type="text" readonly><input id="tic-tac-toe-12" type="text" readonly><input id="tic-tac-toe-13" type="text" readonly>
<input type="button" value="start a new game" id="restart" />
<br />
<input id="tic-tac-toe-21" type="text" readonly><input id="tic-tac-toe-22" type="text" readonly><input id="tic-tac-toe-23" type="text" readonly>
<input type="button" value="examine the computer's decision" id="replay" />
<br />
<input id="tic-tac-toe-31" type="text" readonly><input id="tic-tac-toe-32" type="text" readonly><input id="tic-tac-toe-33" type="text" readonly>
<span class="levels">AI tree levels :
<select id="levels">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
<br /></body>
</html>

INTERFACE.JS

function start()
{
         tic_tac_toe = new tic_tac_toe(' ', new Array('X', 'O'), artificial_intelligence);

         tic_tac_toe.display_choice =
         function(token, row, collumn)
         {
                  if(row < 3 && collumn < 3)
                  {
                     document.getElementById('tic-tac-toe-' + (row + 1) + (collumn + 1)).value = token;
                     if(token != this.blank_token)
                     {
                        document.getElementById('tic-tac-toe-' + (row + 1) + (collumn + 1)).onclick = function() {};
                     }
                     else
                     {
                        eval("document.getElementById('tic-tac-toe-' + (row + 1) + (collumn + 1)).onclick = function() {tic_tac_toe.human_turn(" + row + ", " + collumn + ")}");
                     }
                  }
         }

         document.getElementById('restart').onclick = function() {tic_tac_toe.start();};

         for(var row = 0; row < 3; row++)
         for(var collumn = 0; collumn < 3; collumn++)
         {
             eval("document.getElementById('tic-tac-toe-' + (row + 1) + (collumn + 1)).onclick = function() {tic_tac_toe.human_turn(" + row + ", " + collumn + ")}");
         }

         tic_tac_toe.declare_human_win = function() {alert('you win')};

         tic_tac_toe.declare_computer_win = function() {alert('I (the computer) win')};

         tic_tac_toe.declare_tie = function() {alert('tie');};

         document.getElementById('replay').onclick = function() {tic_tac_toe.debug_my_last_move(document.getElementById('levels').value);};

         tic_tac_toe.start();
}