Science Buddies: "Ask an Expert"

Posted: **Mon Sep 09, 2013 4:29 pm**

Artificial Intelligence in a Tic Tac Toe.
Link: https://www.sciencebuddies.org/science-f ... p014.shtml
I am going to make multiple strategies of AI's and I am going to see which one beats the most humans.
I have the game to a point where two players can play it, but am not completely sure how to incorporate the AI, I am fairly fluent in javascript, css, and HTML,
here is a working example of my game.
Game: http://xenoffpi.no-ip.org/preston/tictactoe/Artificial/

Code: Select all

<HTML> 
<HEAD> 

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'>
<TITLE>Tic Tac Toe!</TITLE> 

<SCRIPT TYPE="TEXT/JAVASCRIPT"> 
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' && 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 < 3; x++) 
{ 
for(var y = 0; y < 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 < 3; y++) 
{ 
val0 = document.getElementById('0_'+y).value; 
val1 = document.getElementById('1_'+y).value; 
val2 = document.getElementById('2_'+y).value; 
if(val0 == 'X' && val1 == 'X' && val2 == 'X') 
{ 
status.innerHTML = "X WINS!"; 
return true; 
} 
else if(val0 == 'O' && val1 == 'O' && val2 == 'O') 
{ 
status.innerHTML = "O WINS!"; 
return true; 
} 
} 


for(var x = 0; x < 3; x++) 
{ 
val0 = document.getElementById(x + '_0').value; 
val1 = document.getElementById(x + '_1').value; 
val2 = document.getElementById(x + '_2').value; 
if(val0 == 'X' && val1 == 'X' && val2 == 'X') 
{ 
status.innerHTML = "X WINS!"; 
return true; 
} 
else if(val0 == 'O' && val1 == 'O' && 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' && val1 == 'X' && val2 == 'X') 
{ 
status.innerHTML = "X WINS!"; 
return true; 
} 
else if(val0 == 'O' && val1 == 'O' && 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' && val1 == 'X' && val2 == 'X') 
{ 
status.innerHTML = "X WINS!"; 
return true; 
} 
else if(val0 == 'O' && val1 == 'O' && val2 == 'O') 
{ 
status.innerHTML = "O WINS!"; 
return true; 
} 

 
} 

</SCRIPT> 

<style>


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;
}
</style>
</HEAD> 

<BODY>

<div align="center">
<div id="outline">
<br>
<br>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
<br>
<br>
<INPUT TYPE="BUTTON" ID="0_0" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="1_0" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="2_0" VALUE=" " ONCLICK="squareclicked(this);"> 
<BR> 
<INPUT TYPE="BUTTON" ID="0_1" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="1_1" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="2_1" VALUE=" " ONCLICK="squareclicked(this);"> 
<BR> 
<INPUT TYPE="BUTTON" ID="0_2" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="1_2" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="2_2" VALUE=" " ONCLICK="squareclicked(this);"> 
<br>

<div align="center">
<div id="stat"> 
<P ID="status">X's turn</P>
</div>
</div>
</div> 
 </div>


</BODY> 
</HTML>

Posted: **Mon Sep 23, 2013 8:47 pm**

Hello:

I'm not sure if this answers your question, but I've gone through your code and here goes.

The simplest way to do what you want is to assume the user always goes first (is 'X'). Then in your

Code: Select all

function squareclicked(square)

, instead of

Code: Select all

if(xTurn)

you always place the 'X' in the square. You don't need the else part then, instead after placing the 'X' call your AI for where to put the 'O', increment numMoves, and off you go. Here's a stab at it:

Code: Select all

if(value != 'X' && value != 'O') 
{ 
numMoves++; 
square.value = 'X'; 
square = TICTACAI();
numMoves++; 
square.value = 'O'; 
status.innerHTML = 'X\'s turn'; 
}

Function TICTACAI returns the square it wants to put an 'O' in, that happens and then you're back waiting for the user again.

I hope this helps, let us know.
Keith

Science Buddies: "Ask an Expert"

Tic Tac Toe AI Help

Tic Tac Toe AI Help

Re: Tic Tac Toe AI Help