Help with Javascript tic tac toe

Ask questions about projects relating to: computer science or pure mathematics (such as probability, statistics, geometry, etc...).
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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. :D :D :D
thom
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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,
thom
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Re: Help with Javascript tic tac toe

Post by davidkallman »

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.
Cheers!

Dave
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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,
thom
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Re: Help with Javascript tic tac toe

Post by davidkallman »

thom-

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

Happy New Year!
Cheers!

Dave
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

CAN ANYBODY HELP!!! I CAN'T GET THE AI TO WORK!!!!!!! :shock :shock: :shock: :shock: :shock: :shock: :shock: :shock: :shock: :shock: :shock: :shock: :shock: :shock: :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: :shock: :shock: :shock: :shock: :shock: :shock: :shock:
thom
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Re: Help with Javascript tic tac toe

Post by davidkallman »

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.
Cheers!

Dave
pgordon
Posts: 8
Joined: Tue Sep 26, 2006 6:28 pm

Post by pgordon »

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).
Paul Gordon
Software Engineer
Symantec
scibudadmin
Site Admin
Posts: 168
Joined: Thu Sep 18, 2003 4:32 pm

Post by scibudadmin »

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>

<!-- test of TicTacToe code posted on site -->
<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>
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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!
thom
Locked

Return to “Math & Computer Science Sponsored by Hyperion Solutions Corp”