Code for Tic-Tac-Toe project won't work

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

Moderators: AmyCowen, kgudger, bfinio, MadelineB, Moderators

Locked
sciencerulesyesitdoes
Posts: 4
Joined: Wed Jan 22, 2020 6:40 pm
Occupation: Student

Code for Tic-Tac-Toe project won't work

Post by sciencerulesyesitdoes »

I copied and pasted the code from the background tab of the science buddies project "Artificial Intelligence: Teaching the Computer to Play Tic-Tac-Toe." The code doesn't work. It worked until I added the turn function. The code is here:

[Administrator added - project url: https://www.sciencebuddies.org/science- ... background ]


<!DOCTYPE html>
<html>
<head>

<SCRIPT TYPE="TEXT/JAVASCRIPT">
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(value != 'X' && value != 'O')
{
if(xTurn)
{
square.value = 'X';
xTurn = false;
status.innerHTML = 'O\'s turn';
}
else
{
square.value = 'O';
xTurn = true;
status.innerHTML = 'X\'s turn';
}
}
else
alert('That square has already been played.');
}

function newgame()
{
var status = document.getElementById('status');

xTurn = true;
status.innerHTML = 'X\'s turn';

for(var x = 0; x < x++)
{
for(var y = 0; y < y++)
{
document.getElementById(x + '_' + y).value = ' ';
}
}
}

var gameOver = false;

var numMoves = 0;

function checkWin()
{
var status = document.getElementById('status');
var val0;
var val1;
var val2;

// check columns
for(var y = 0; y < 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 < 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;
}


numMoves = 0;
gameOver = false;


if(gameOver)
{
alert("The game is already over.");
return;
}


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';
}

var winner = checkWin();
if(!winner)
{
//check to see if there is a tie
if(numMoves == 9)
status.innerHTML = 'Tie Game!';
}
else
gameOver = true;

</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>

<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">

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




</body>
</head>
</html>

When I opened it in Chrome, I tried to click the buttons to place an X or O. When clicked, the buttons do nothing. How do I fix this? :!: :!: :!:
AmyCowen
Site Admin
Posts: 581
Joined: Mon Aug 22, 2016 4:39 pm
Occupation: Administrator
Project Question: -
Project Due Date: -
Project Status: Not applicable

Re: Code for Tic-Tac-Toe project won't work

Post by AmyCowen »

Were you able to spot the problem with your JavaScript?

Make sure you check back to step 4 in the directions (re: creating the global variable for xTurn).

Amy
Science Buddies
sciencerulesyesitdoes
Posts: 4
Joined: Wed Jan 22, 2020 6:40 pm
Occupation: Student

Re: Code for Tic-Tac-Toe project won't work

Post by sciencerulesyesitdoes »

AmyCowen wrote:Were you able to spot the problem with your JavaScript?

Make sure you check back to step 4 in the directions (re: creating the global variable for xTurn).

Amy
Science Buddies
I fixed the issue and put the global variable before the first function, but as soon as i updated the buttons to call the square clicked function when clicked, the buttons stopped working.
sciencerulesyesitdoes
Posts: 4
Joined: Wed Jan 22, 2020 6:40 pm
Occupation: Student

Re: Code for Tic-Tac-Toe project won't work

Post by sciencerulesyesitdoes »

My tech teacher found a problem with the for loops. Could you tell me how to fix it?
AmyCowen
Site Admin
Posts: 581
Joined: Mon Aug 22, 2016 4:39 pm
Occupation: Administrator
Project Question: -
Project Due Date: -
Project Status: Not applicable

Re: Code for Tic-Tac-Toe project won't work

Post by AmyCowen »

Why don't you post your code as you have it now so that Experts can see where you are. You are still trying to get the starter code working, correct?

Amy
sciencerulesyesitdoes
Posts: 4
Joined: Wed Jan 22, 2020 6:40 pm
Occupation: Student

Re: Code for Tic-Tac-Toe project won't work

Post by sciencerulesyesitdoes »

No worries... My awesome tech teacher helped me fixed it! :D :D :D :) :) :) :wink: :wink: :wink: 8) 8) 8) Turns out the for loops were incomplete. It now works perfectly! Maybe someone should update the code on the project page, as it does not work. Here is the final working code:


HTML PART---------


<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</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>

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

<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">

<script type="text/javascript" src="script.js"></script>
</body>

</html>


JAVASCRIPT PART---------

var xTurn = true;
var gameOver = false;
var numMoves = 0;

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;
}


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 = ' ';
}
}
numMoves = 0;
gameOver = false;
}
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;

Thank you for your help, it helped me realize one of my mistakes on Step 4 :!: :!: :!:
AmyCowen
Site Admin
Posts: 581
Joined: Mon Aug 22, 2016 4:39 pm
Occupation: Administrator
Project Question: -
Project Due Date: -
Project Status: Not applicable

Re: Code for Tic-Tac-Toe project won't work

Post by AmyCowen »

I'm so glad your teacher was able to help you debug the code for a working game of tic-tac-toe! I've reported the problem to the team at Science Buddies so that the directions can be reviewed.

Amy
Science Buddies
Locked

Return to “Grades 6-8: Math and Computer Science”