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

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

Postby sciencerulesyesitdoes » Wed Jan 22, 2020 6:49 pm

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: 387
Joined: Mon Aug 22, 2016 4:39 pm
Occupation: Administrator

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

Postby AmyCowen » Tue Jan 28, 2020 11:39 am

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

Postby sciencerulesyesitdoes » Fri Jan 31, 2020 10:32 am

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

Postby sciencerulesyesitdoes » Thu Feb 06, 2020 8:58 am

My tech teacher found a problem with the for loops. Could you tell me how to fix it?

AmyCowen
Site Admin
Posts: 387
Joined: Mon Aug 22, 2016 4:39 pm
Occupation: Administrator

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

Postby AmyCowen » Thu Feb 06, 2020 9:13 am

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

Postby sciencerulesyesitdoes » Fri Feb 07, 2020 9:05 am

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: 387
Joined: Mon Aug 22, 2016 4:39 pm
Occupation: Administrator

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

Postby AmyCowen » Fri Feb 07, 2020 9:58 am

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


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