Science Buddies: "Ask an Expert"

by **thom** » Sat Dec 30, 2006 8:56 am

By the way: The code that I have posted above has absolutely NO AI in it, but anybody who wants to can use it to help with programming their project.

by **thom** » Sat Dec 30, 2006 11:22 am

Okay, I've hit a minor block. Could someone please tell me how I make the computer select a square? I have been able to make it check all of the squares for empty ones, but can't make it actually select one.

Thanks,

by **davidkallman** » Sat Dec 30, 2006 4:16 pm

thom-

Congratulations on a job well done! Congratulations also on your stamina.

What specific change did you need you need to make to the program that's posted online? I'll need this information to report the suspected bug to the science buddies staff.

by **thom** » Sat Dec 30, 2006 6:45 pm

As far as I can tell, the only changes are that a global variable (var status = document.getElementById('status');) needs to be added, and a line in the newgame() function (status = document.getElementById('status');) needs to be added. I'm in a hurry right now though, so I might have missed something.

Also, again, if anybody can help me with the AI, please do.

Thanks,

by **davidkallman** » Mon Jan 01, 2007 11:50 am

thom-

Thanks. I'll pass the solution and the change description along to the science buddies staff.

Happy New Year!

by **thom** » Mon Jan 01, 2007 3:04 pm

CAN ANYBODY HELP!!! I CAN'T GET THE AI TO WORK!!!!!!! :shock :shock:

Anyway, I have been able to make the program cycle through all the squares, but can't make it select a random empty one!!

PLEASE HELP IF YOU CAN!!!!!
:shock:

by **davidkallman** » Mon Jan 01, 2007 8:02 pm

thom-

Just a hunch. Did you try the code exactly as posted on the site? I can't believe science buddies would post code with errors.

by **pgordon** » Tue Jan 02, 2007 11:13 am

I wrote some AI strategy for this project on another thread.

Writing the AI that gets the computer to make a good move will be the hardest part. You will need to write code that will do 2 major things:

1) Create all possible board combinations that the computer can create on the next move. Since tic-tac-toe is a rather simple game you have the advantage of not having to create a perfect system. Computers are fast enough that you can compare all possible board combinations without bogging the computer down. The number of possible boards you would need to compare would be at most 9 (the very first move) and at least 1 (the very last move).

2) Rank these possible board combinations based on a value system to determine which move is the best move. This wikipedia page has a good ranking system:

1. Complete three in a row (WIN).
2. Block their opponent from completing three in a row.
3. Threaten a win with two possible completions in two rows.
4. Avoid a configuration in which the opponent can force the win.
5. Threaten a win with a possible completion (two in a row).
6. Prevent the opponent from getting two in a row.
7. Play in the middle box.
8. Play in a corner box.
9. Play on a side box.

I would rank a board in which the next move wins as 10,000, a board in which the next move loses as -1, and rank the rest of the boards using values you give to the list above. After you have ranked all the boards and found the best move (highest value), you need to make the computer take that move. You can then toss away the temporary boards you created since we got that information we wanted for that round (the best move).

by **scibudadmin** » Tue Jan 02, 2007 11:40 am

Dear Thom and Dan,

Thanks for bringing the problem with the TicTacToe code to my attention. There was one omission in the code posted on the site, and Thom found it (nice going, Thom!). The newgame() function did not declare the 'status' variable. I've added the necessary line in the code on the site.

Thom: there is no need for a global status variable, as long as a local 'status' variable is declared in each function that uses it (i.e., squareClicked, newGame and checkWin).

Below is a test HTML page that I put together using the code snippets from the Science Buddies site. It seems to work just fine.

Good luck with your project, Thom! Seems like you're off to a good start!
Andrew Olson

Senior Scientist
Science Buddies

<HTML>
<HEAD>


<TITLE>TicTacToe Code Test</TITLE>

<SCRIPT TYPE="TEXT/JAVASCRIPT">
var xTurn = true;
var gameOver = false;
var numMoves = 0;

function squareclicked(square)
// squareclicked is a function that is called whenever a button is clicked.
{
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)
{
//check to see if there is a tie
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;

// check columns
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;
}
}

// check rows
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;
}
}

// check top left to lower right diagonal
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;
}

// check lower left to top right diagonal
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;
}

// no winner yet return false;
}

</SCRIPT>

</HEAD>

<BODY>

<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>
<BR>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">

<P ID="status">X's turn</P>

</BODY>
</HTML>

by **thom** » Sat Jan 06, 2007 2:08 pm

Thanks For the thanks and encouragement!!
one of my neighbor's sons has been helping me get the AI into the game and we are almost done!! But anyway, glad I could help, and wish me luck with getting the AI in!

Science Buddies: "Ask an Expert"

Help with Javascript tic tac toe

Re: Help with Javascript tic tac toe

Re: Help with Javascript tic tac toe

Re: Help with Javascript tic tac toe

Who is online