[Teaching the Computer to Play Tic-Tac-Toe] Need help!

Ask questions about projects relating to: computer science or pure mathematics (such as probability, statistics, geometry, etc...).

Moderators: kgudger, bfinio, Moderators

Locked
Petervu
Posts: 15
Joined: Fri Mar 06, 2009 7:00 pm
Occupation: Student
Project Question: In the following project : Teaching the Computer to Play Tic-Tac-Toe
The instructions are not very clear on how to set up a "Game over" function and a check win function. I found by googling a finished product of a Tic Tac Toe game to find out where to put the check win. I do not know where to put the "if game over function". When I insert it the buttons on the game do not click.
Project Due Date: Wednesday March 11th 2009. I started 2 weeks ago but have been stuck on the same situation.
Project Status: I am conducting my experiment

[Teaching the Computer to Play Tic-Tac-Toe] Need help!

Post by Petervu »

In the following project : Teaching the Computer to Play Tic-Tac-Toe: https://www.sciencebuddies.org/science- ... y&from=TSW
The instructions are not very clear on how to set up a "Game over" function and a check win function. I found by googling a finished product of a Tic Tac Toe game to find out where to put the check win. I do not know where to put the "if game over function". When I insert it the buttons on the game do not click. The buttons just wont click. Also the due date is Wednesday March 11. Please help me thankyou.Here is my somewhat final code that I come up with and I need help on what I did wrong.

<SCRIPT TYPE="TEXT/JAVASCRIPT">
function squareclicked(square)
// squareclicked is a function that is called whenever a button is clicked.
if(gameOver)
{
alert("The game is already over.");
return;
}
{
var status = document.getElementById('status');
var value = square.value;
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;
if(gameOver)
{
alert("The game is already over.");
return;
}
function newgame()
{
var status = document.getElementById('status');
var gameOver = false;
var numMoves = 0;
xTurn = true;
status.innerHTML = 'X\'s turn';

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>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();checkWin();numMoves = 0;gameOver = false;">
<br>
<INPUT TYPE="BUTTON" ID="0_0" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<INPUT TYPE="BUTTON" ID="1_0" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<INPUT TYPE="BUTTON" ID="2_0" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<BR>
<INPUT TYPE="BUTTON" ID="0_1" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<INPUT TYPE="BUTTON" ID="1_1" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<INPUT TYPE="BUTTON" ID="2_1" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<BR>
<INPUT TYPE="BUTTON" ID="0_2" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<INPUT TYPE="BUTTON" ID="1_2" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<INPUT TYPE="BUTTON" ID="2_2" VALUE=" " ONCLICK="squareclicked(this);checkWin();">
<BR>
<P ID="status">X's turn</P>
Thankyou In Advance :)
Petervu
Posts: 15
Joined: Fri Mar 06, 2009 7:00 pm
Occupation: Student
Project Question: In the following project : Teaching the Computer to Play Tic-Tac-Toe
The instructions are not very clear on how to set up a "Game over" function and a check win function. I found by googling a finished product of a Tic Tac Toe game to find out where to put the check win. I do not know where to put the "if game over function". When I insert it the buttons on the game do not click.
Project Due Date: Wednesday March 11th 2009. I started 2 weeks ago but have been stuck on the same situation.
Project Status: I am conducting my experiment

Re: [Teaching the Computer to Play Tic-Tac-Toe] Need help!

Post by Petervu »

I have gotten the 1v1 game to work but I am now stuck on how to start on the AI
Petervu
Posts: 15
Joined: Fri Mar 06, 2009 7:00 pm
Occupation: Student
Project Question: In the following project : Teaching the Computer to Play Tic-Tac-Toe
The instructions are not very clear on how to set up a "Game over" function and a check win function. I found by googling a finished product of a Tic Tac Toe game to find out where to put the check win. I do not know where to put the "if game over function". When I insert it the buttons on the game do not click.
Project Due Date: Wednesday March 11th 2009. I started 2 weeks ago but have been stuck on the same situation.
Project Status: I am conducting my experiment

Re: [Teaching the Computer to Play Tic-Tac-Toe] Need help!

Post by Petervu »

This is what I have come up with but it does not work. The buttons simply do not press. Please tell me what is wrong with it

<SCRIPT TYPE="TEXT/JAVASCRIPT">


var gameOver = false;
var numMoves = 0;

function squareclicked(square)
// squareclicked is a function that is called whenever a button is clicked.
{
var status = document.getElementById('status');
var value = square.value;
if(gameOver)
{
computerTurn = false;
alert("This game is OVER!!");
return;
}
if(value != 'X' && value != 'O')
{
if(xTurn)
{
numMoves++;
square.value = "X";
xTurn = false;
aiMove = true;
}
if(aiMove)
{
makeMove()
status.innerHTML = 'X\'s turn';
xturn = true;
}
}
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';
for(var x = 0; x < 3; x++)
{
for(var y = 0; y < 3; y++)
{
document.getElementById(x + '_' + y).value = ' ';
gameOver = false;
numMoves = 0;
}
}
}
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;
}

Function makeMove()
{
box1 = 3;
box2 = 2;
box3 = 3;
box4 = 2;
box5 = 4;
box6 = 2;
box7 = 3;
box8 = 2;
box9 = 3;
var sq1;
var sq2;
var sq3;
var sq4;
var sq5;
var sq6;
var sq7;
var sq8;
var sq9;
{
sq1 = document.getElementById('0_0').value;
sq2 = document.getElementById('1_0').value;
sq3 = document.getElementById('2_0').value;
sq4 = document.getElementById('0_1').value;
sq5 = document.getElementById('1_1').value;
sq6 = document.getElementById('2_1').value;
sq7 = document.getElementById('0_2').value;
sq8 = document.getElementById('1_2').value;
sq9 = document.getElementById('2_2').value;
var status = document.getElementById('status');

// check top row<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
if(sq1 == 'X' && sq2 == 'X' && sq3 == ' ')
{
box3 = box3+10}
if(sq2 == 'X' && sq3 == 'X' && sq1 == ' ')
{
box1 = box1+10}
if(sq1 == 'X' && sq3 == 'X' && sq2 == ' ')
{
box2 = box2 + 10}

if(sq1 == 'O' && sq3 == 'O' && sq2 == ' ')
{
box2 = box2 + 15}
if(sq1 == ' ' && sq3 == 'O' && sq2 == 'O')
{
box1 = box1 + 15}
if(sq1 == 'O' && sq3 == ' ' && sq2 == 'O')
{
box3 = box3 + 15};

// now check diagonal upper left to lower right<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
if(sq1 == 'X' && sq5 == 'X' && sq9 == ' ')
{
box9 = box9 + 10}
if(sq1 == ' ' && sq5 == 'X' && sq9 == 'X')
{
box1 = box1 + 10}
if(sq1 == 'X' && sq5 == ' ' && sq9 == 'X')
{
box5 = box5 + 10}
if(sq1 == 'O' && sq5 == 'O' && sq9 == ' ')
{
box9 = box9 + 15}
if(sq1 == ' ' && sq5 == 'O' && sq9 == 'O')
{
box1 = box1 + 15}
if(sq1 == 'O' && sq5 == ' ' && sq9 == 'O')
{
box5 = box5 + 15};

// now check upper right to lower left<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
if(sq3 == 'X' && sq5 == 'X' && sq7 == ' ')
{
box7 = box7 + 10}
if(sq3 == ' ' && sq5 == 'X' && sq7 == 'X')
{
box3 = box3 + 10}
if(sq3 == 'X' && sq5 == ' ' && sq7 == 'X')
{
box5 = box5 + 10}
if(sq3 == 'O' && sq5 == 'O' && sq7 == ' ')
{
box7 = box7 + 15}
if(sq3 == ' ' && sq5 == 'O' && sq7 == 'O')
{
box3 = box3 + 15}
if(sq3 == 'O' && sq5 == ' ' && sq7 == 'O')
{
box5 = box5 + 15};

// check row two<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
if(sq4 == ' ' && sq5 == 'X' && sq6 == 'X')
{
box4 = box4 + 10}
if(sq4 == 'X' && sq5 == 'X' && sq6 == ' ')
{
box6 = box6 + 10}
if(sq4 == 'X' && sq5 == ' ' && sq6 == 'X')
{
box5 = box5 + 10}
if(sq4 == 'O' && sq5 == 'O' && sq6 == ' ')
{
box6 = box6 + 15}
if(sq4 == ' ' && sq5 == 'O' && sq6 == 'O')
{
box4 = box4 + 15}
if(sq4 == 'O' && sq5 == ' ' && sq6 == 'O')
{
box5 = box5 + 15};

//check bottom row<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
if(sq7 == 'X' && sq8 == 'X' && sq9 == ' ')
{
box9 = box9 + 10}
if(sq8 == 'X' && sq9 == 'X' && sq7 == ' ')
{
box7 = box7 + 10}
if(sq7 == 'X' && sq9 == 'X' && sq8 == ' ')
{
box8 = box8 + 10}
if(sq7 == 'O' && sq8 == 'O' && sq9 == ' ')
{
box9 = box9 + 15}
if(sq7 == ' ' && sq8 == 'O' && sq9 == 'O')
{
box7 = box7 + 15}
if(sq7 == 'O' && sq8 == ' ' && sq9 == 'O')
{
box8 = box8 + 15}

//check left column<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
if(sq1 == 'X' && sq4 == 'X' && sq7 == ' ')
{
box7 = box7 +10}
if(sq1 == ' ' && sq4 == 'X' && sq7 == 'X')
{
box1 = box1 + 10}
if(sq1 == 'X' && sq4 == ' ' && sq7 == 'X')
{
box4 = box4 + 10}
if(sq1 == 'O' && sq4 == 'O' && sq7 == ' ')
{
box7 = box7 + 15}
if(sq1 == ' ' && sq4 == 'O' && sq7 == 'O')
{
box1 = box1 + 15}
if(sq1 == 'O' && sq4 == ' ' && sq7 == 'O')
{
box4 = box4 + 15}

//check middle column<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
if(sq2 == 'X' && sq5 == 'X' && sq8 == ' ')
{
box8 = box8 + 10}
if(sq2 == ' ' && sq5 == 'X' && sq8 == 'X')
{
box2 = box2 + 10}
if(sq2 == 'X' && sq5 == ' ' && sq8 == 'X')
{
box5 = box5 + 10}
if(sq2 == 'O' && sq5 == 'O' && sq8 == ' ')
{
box8 = box8 + 15}
if(sq2 == ' ' && sq5 == 'O' && sq8 == 'O')
{
box2 = box2 + 15}
if(sq2 == 'O' && sq5 == ' ' && sq8 == 'O')
{
box5 = box5 + 15}

//check right column<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
if(sq3 == 'X' && sq6 == 'X' && sq9 == ' ')
{
box9 = box9 + 10}
if(sq3 == ' ' && sq6 == 'X' && sq9 == 'X')
{
box3 = box3 + 10}
if(sq3 == 'X' && sq6 == ' ' && sq9 == 'X')
{
box6 = box6 + 10}
if(sq3 == 'O' && sq6 == 'O' && sq9 == ' ')
{
box9 = box9 + 15}
if(sq3 == ' ' && sq6 == 'O' && sq9 == 'O')
{
box3 = box3 + 15}
if(sq3 == 'O' && sq6 == ' ' && sq9 == 'O')
{
box6 = box6 + 15}
}
if(box1>= box2 && box1 >= box3 && box1 >= box4 && box1 >= box5 && box1 >= box6 && box1 >= box7 && box1 >= box8 && box1 >= box9 && sq1 == ' ')
{
document.getElementById('0_0').value = 'O';
aiMove = !aiMove
numMoves++;
}
else if(box2 >= box1 && box2 >= box3 && box2 >= box4 && box2 >= box5 && box2 >= box6 && box2 >= box7 && box2 >= box8 && box2 >= box9 && sq2 == ' ')
{document.getElementById('1_0').value = 'O';
aiMove = !aiMove
numMoves++;
}
else if(box3 >= box1 && box3 >= box2 && box3 >= box4 && box3 >= box5 && box3 >= box6 && box3 >= box7 && box3 >= box8 && box3 >= box9 && sq3 == ' ')
{
document.getElementById('2_0').value = 'O';
aiMove = !aiMove
numMoves++;}
else if(box4 >= box1 && box4 >= box2 && box4 >= box3 && box4 >= box5 && box4 >= box6 && box4 >= box7 && box4 >= box8 && box4 >= box9 && sq4 == 'O')
{
document.getElementById('0_1').value = 'O';
aiMove = !aiMove
numMoves++;}
else if(box5 >= box1 && box5 >= box2 && box5 >= box3 && box5 >= box4 && box5 >= box6 && box5 >= box7 && box5 >= box8 && box5 >= box9 && sq5 == 'O')
{
document.getElementById('1_1').value = 'O';
aiMove = !aiMove
numMoves++;}
else if(box6 >= box1 && box6 >= box2 && box6 >= box3 && box6 >= box4 && box6 >= box5 && box6 >= box7 && box6 >= box8 && box6 >= box9 && sq6 == 'O')
{
document.getElementById('2_1').value = 'O';
aiMove = !aiMove
numMoves++;}
else if(box7 >= box1 && box7 >= box2 && box7 >= box3 && box7 >= box4 && box7 >= box5 && box7 >= box6 && box7 >= box8 && box7 >= box9 && sq7 == 'O')
{
document.getElementById('0_2').value = 'O';
aiMove = !aiMove
numMoves++;}
else if(box8 >= box1 && box8 >= box2 && box8 >= box3 && box8 >= box4 && box8 >= box5 && box8 >= box6 && box8 >= box7 && box8 >= box9 && sq8 == 'O')
{
document.getElementById('1_2').value = 'O';
aiMove = !aiMove
nuMoves++;}
else if(box9 >= box1 && box9 >= box2 && box9 >= box3 && box9 >= box4 && box9 >= box5 && box9 >= box6 && box9 >= box7 && box9 >= box8 && sq9 == 'O')
{
document.getElementById('2_2').value = 'O';
aiMove = !aiMove
numMoves++;}
else if(sq1 == ' ')
{
document.getElementById('0_0').value = 'O';
aiMove = !aiMove
numMove++;}
else if(sq2 == ' ')
{
document.getElementById('1_0').value = 'O';
aiMove = !aiMove
numMove++;}
else if(sq3 == ' ')
{
document.getElementById('2_0').value = 'O';
aiMove = !aiMove
numMove++;}
else if(sq4 == ' ')
{
document.getElementById('0_1').value = 'O';
aiMove = !aiMove
numMove++;}
else if(sq5 == ' ')
{
document.getElementById('1_1').value = 'O';
aiMove = !aiMove
numMove++;}
else if(sq6 == ' ')
{
document.getElementById('2_1').value = 'O';
aiMove = !aiMove
numMove++;}
else if(sq7 == ' ')
{
document.getElementById('0_2').value = 'O';
aiMove = !aiMove
numMove++;}
else if(sq8 == ' ')
{
document.getElementById('1_2').value = 'O';
aiMove = !aiMove
numMove++;}
else if(sq9 == ' ')
{
document.getElementById('2_2').value = 'O';
aiMove = !aiMove
numMove++;}
}



</script>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
<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>
<P ID="status">X's turn</P>
ChrisG
Former Expert
Posts: 1019
Joined: Fri Oct 28, 2005 11:43 am
Occupation: Research Hydrologist
Project Question: n/a
Project Due Date: n/a
Project Status: Not applicable

Re: [Teaching the Computer to Play Tic-Tac-Toe] Need help!

Post by ChrisG »

Hi Peter,
I see you have already posted this question in the 6-8 Math and Computer Science forum, and you have received some advice in that topic. Are you in grades 9-12 or 6-8?
http://www.sciencebuddies.com/science-f ... 27b#p19852
We ask you please to keep your questions related to your project in a single topic. This allows experts to see the full background and context of your questions including the help that has already been provided.

Have you tried the advice that was given about how to debug the program?

Thanks,
Chris
Petervu
Posts: 15
Joined: Fri Mar 06, 2009 7:00 pm
Occupation: Student
Project Question: In the following project : Teaching the Computer to Play Tic-Tac-Toe
The instructions are not very clear on how to set up a "Game over" function and a check win function. I found by googling a finished product of a Tic Tac Toe game to find out where to put the check win. I do not know where to put the "if game over function". When I insert it the buttons on the game do not click.
Project Due Date: Wednesday March 11th 2009. I started 2 weeks ago but have been stuck on the same situation.
Project Status: I am conducting my experiment

Re: [Teaching the Computer to Play Tic-Tac-Toe] Need help!

Post by Petervu »

I am in grade 9. I put this post in the grade 9 part of the forum first but i never got a reply so I figured the people monitoring this part of the forums probably retired or something.
I have tried to debug the program first with internet explorer debugger and the microsoft script debugger but none of it helped. I know that something is definitely wrong with my AI function but i just do not know what.
ChrisG
Former Expert
Posts: 1019
Joined: Fri Oct 28, 2005 11:43 am
Occupation: Research Hydrologist
Project Question: n/a
Project Due Date: n/a
Project Status: Not applicable

Re: [Teaching the Computer to Play Tic-Tac-Toe] Need help!

Post by ChrisG »

OK, thanks for the information. The Math and Computer Science experts do visit each forum for the various grade levels. Sorry it took a while for you to get a response.
I moved your other topic into this forum:
http://www.sciencebuddies.com/science-f ... =30&t=4883
Please keep all posts related to you project in that topic.
Thanks.
Chris
Locked

Return to “Grades 9-12: Math and Computer Science”