Science Buddies: "Ask an Expert"

If you have a question about your science fair project, you are in the right place!
https://www.sciencebuddies.org/science-fair-projects/ask-an-expert/

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

https://www.sciencebuddies.org/science-fair-projects/ask-an-expert/viewtopic.php?t=21048

Page 1 of 1

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

Posted: Wed Jan 22, 2020 6:49 pm
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? :!: :!: :!:

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

Posted: Tue Jan 28, 2020 11:39 am
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

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

Posted: Fri Jan 31, 2020 10:32 am
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.

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

Posted: Thu Feb 06, 2020 8:58 am
by sciencerulesyesitdoes
My tech teacher found a problem with the for loops. Could you tell me how to fix it?

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

Posted: Thu Feb 06, 2020 9:13 am
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

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

Posted: Fri Feb 07, 2020 9:05 am
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 :!: :!: :!:

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

Posted: Fri Feb 07, 2020 9:58 am
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
All times are UTC-07:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited