title: Tic Tac Toe Science Fair AI and Strategy
body: <p>I am doing a science fair project about doing a javascript Artificial Intelligence Game with different strategies, and seeing which one beats the most humans.
  I am not sure how to put in the AI or the strategy, please help.
  <br><br>
  A two player example of my game: <a href="http://xenoffpi.no-ip.org/preston/tictactoe/" rel="nofollow">http://xenoffpi.no-ip.org/preston/tictactoe</a>
  <br><br>
  Here is my code:</p>
  
  <pre><code>&lt;HTML&gt; 
  &lt;HEAD&gt; 
  
  &lt;link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'&gt;
  &lt;TITLE&gt;Tic Tac Toe!&lt;/TITLE&gt; 
  
  &lt;SCRIPT TYPE="TEXT/JAVASCRIPT"&gt; 
  var xTurn = true; 
  var gameOver = false; 
  var numMoves = 0; 
  
  function squareclicked(square) 
  
  { 
  var value = square.value; 
  var status = document.getElementById('status'); 
  
  if(gameOver) 
  { 
  alert("The game is already over."); 
  return; 
  } 
  
  if(value != 'X' &amp;&amp; value != 'O') 
  { 
  if(xTurn) 
  { 
  numMoves++; 
  square.value = 'X'; 
  xTurn = false; 
  status.innerHTML = 'O\'s turn'; 
  } 
  else 
  { 
  numMoves++; 
  square.value = 'O'; 
  xTurn = true; 
  status.innerHTML = 'X\'s turn'; 
  } 
  } 
  else 
  alert('That square has already been played.'); 
  
  var winner = checkWin(); 
  if(!winner) 
  { 
  
  if(numMoves == 9) 
  status.innerHTML = 'Tie Game!'; 
  } 
  else 
  gameOver = true; 
  
  } 
  
  function newgame() 
  { 
  var status = document.getElementById('status'); 
  
  xTurn = true; 
  status.innerHTML = 'X\'s turn'; 
  gameOver = false; 
  numMoves = 0; 
  
  for(var x = 0; x &lt; 3; x++) 
  { 
  for(var y = 0; y &lt; 3; y++) 
  { 
  document.getElementById(x + '_' + y).value = ' '; 
  } 
  } 
  } 
  
  function checkWin() 
  { 
  var status = document.getElementById('status'); 
  var val0; 
  var val1; 
  var val2; 
  
  
  for(var y = 0; y &lt; 3; y++) 
  { 
  val0 = document.getElementById('0_'+y).value; 
  val1 = document.getElementById('1_'+y).value; 
  val2 = document.getElementById('2_'+y).value; 
  if(val0 == 'X' &amp;&amp; val1 == 'X' &amp;&amp; val2 == 'X') 
  { 
  status.innerHTML = "X WINS!"; 
  return true; 
  } 
  else if(val0 == 'O' &amp;&amp; val1 == 'O' &amp;&amp; val2 == 'O') 
  { 
  status.innerHTML = "O WINS!"; 
  return true; 
  } 
  } 
  
  
  for(var x = 0; x &lt; 3; x++) 
  { 
  val0 = document.getElementById(x + '_0').value; 
  val1 = document.getElementById(x + '_1').value; 
  val2 = document.getElementById(x + '_2').value; 
  if(val0 == 'X' &amp;&amp; val1 == 'X' &amp;&amp; val2 == 'X') 
  { 
  status.innerHTML = "X WINS!"; 
  return true; 
  } 
  else if(val0 == 'O' &amp;&amp; val1 == 'O' &amp;&amp; val2 == 'O') 
  { 
  status.innerHTML = "O WINS!"; 
  return true; 
  } 
  } 
  
  
  val0 = document.getElementById('0_0').value; 
  val1 = document.getElementById('1_1').value; 
  val2 = document.getElementById('2_2').value; 
  if(val0 == 'X' &amp;&amp; val1 == 'X' &amp;&amp; val2 == 'X') 
  { 
  status.innerHTML = "X WINS!"; 
  return true; 
  } 
  else if(val0 == 'O' &amp;&amp; val1 == 'O' &amp;&amp; val2 == 'O') 
  { 
  status.innerHTML = "O WINS!"; 
  return true; 
  } 
  
  
  val0 = document.getElementById('2_0').value; 
  val1 = document.getElementById('1_1').value; 
  val2 = document.getElementById('0_2').value; 
  if(val0 == 'X' &amp;&amp; val1 == 'X' &amp;&amp; val2 == 'X') 
  { 
  status.innerHTML = "X WINS!"; 
  return true; 
  } 
  else if(val0 == 'O' &amp;&amp; val1 == 'O' &amp;&amp; val2 == 'O') 
  { 
  status.innerHTML = "O WINS!"; 
  return true; 
  } 
  
  
  } 
  
  &lt;/SCRIPT&gt; 
  
  &lt;style&gt;
  
  
  input[type=button] {
      color:#08233e;
  background-color: #9999FF;
      font-family: 'Crafty Girls', cursive;
      font-size:70%;
     width: 100;
  height:100;
      cursor:pointer;
  font-size:25;
  border:groove;
  border-color: 000000;
  font-weight:900;
  }
  
  input[type=button]:hover {
      background-color:#6666FF;
  }
  
  
  input[id="NEWGAME"] {
      color:#08233e;
  background-color: #9999FF;
     width: 310;
  height:60;
      cursor:pointer;
  font-size:30;
  font-family: 'Shadows Into Light', cursive;
  
  }
  
  input[id=NEWGAME]:hover {
      background-color:#6666FF;
  
  
  }
  
  #status{
  font-family: 'Shadows Into Light', cursive;
  font-size:30;
  font-style:bold;
  font-weight:900;
  }
  
  #stat{
  background-color:#9999FF;
  width:302;
  height:50
  }
  
  #outline{
  width:400;
  height:530;
  background-color:000000;
  
  }
  
  
  #header{
  height:100;
  width:800;
  background-color:000000;
  }
  &lt;/style&gt;
  &lt;/HEAD&gt; 
  
  &lt;BODY&gt;
  
  &lt;div align="center"&gt;
  &lt;div id="outline"&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();"&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;INPUT TYPE="BUTTON" ID="0_0" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;INPUT TYPE="BUTTON" ID="1_0" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;INPUT TYPE="BUTTON" ID="2_0" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;BR&gt; 
  &lt;INPUT TYPE="BUTTON" ID="0_1" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;INPUT TYPE="BUTTON" ID="1_1" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;INPUT TYPE="BUTTON" ID="2_1" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;BR&gt; 
  &lt;INPUT TYPE="BUTTON" ID="0_2" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;INPUT TYPE="BUTTON" ID="1_2" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;INPUT TYPE="BUTTON" ID="2_2" VALUE=" " ONCLICK="squareclicked(this);"&gt; 
  &lt;br&gt;
  
  &lt;div align="center"&gt;
  &lt;div id="stat"&gt; 
  &lt;P ID="status"&gt;X's turn&lt;/P&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
   &lt;/div&gt;
  
  
  &lt;/BODY&gt; 
  &lt;/HTML&gt;
  </code></pre>