Science Buddies: "Ask an Expert"

by **thom** » Tue Dec 26, 2006 2:21 pm

I have gotten the board to work--including adding the language for the check win function. However, I can't get the check win function to work. I have made the necessary modifications to the squareclicked function (I think), but my board will still not register when a game is ended--and/or who has won (or tied). I have tried to rearrange the script to make it work, but it still doesn't seem to do it.

Please help! Any tips that you can give would be greatly appreciated.

Thank you very much.

by **davidkallman** » Tue Dec 26, 2006 2:54 pm

Hi thom!

I don't know javascript, so I can't comment directly on your code.

The game has ended if nine turns have been taken or someone has three in a row.

The three in row can come in one of eight was vertically (3), horizontally (3), or diagonally (2).

Think I got that right right. Does that help?

by **thom** » Tue Dec 26, 2006 3:11 pm

Dave:

Thanks for your response.

I already understood the 8 ways that a game could be won and how it could be tied, and had tried to write the script as per your site's instructions (http://www.sciencebuddies.com/mentoring ... ?from=Home).

However, my issue is with how to write the javascript code to make it recognize and execute the game end and check win functions.

This is what I have been able to make it do:
1) Display the board.
2) Display the "X" and "O" markers
3) Alternate turns, and show that in the status bar.
4) Indicate when a square is clicked for a second time, and is no longer available.
5) Reset the board for a new game.

However, what I haven't been able to do is:
1) Get the program to recognize the end of the game.
2) Get the program to display the winner and/or indicate a tie.

Any other tips you have would be appreciated.

Thanks.

by **davidkallman** » Tue Dec 26, 2006 10:06 pm

thom:

The javascript at the URL you mentioned :

http://www.sciencebuddies.com/mentoring ... ?from=Home

has a solution. It sounds like you're using this program.

It now becomes an issue of debugging your program. I think that's easiest done by inputting select board states into your program, and seeing if you get the right output (i.e., WON/LOST, GAME OVER, etc.

I would also encourage looking at the javascript tutorial mentioned in the bibliography.

by **thom** » Wed Dec 27, 2006 7:57 am

Dave-
Thanks for the tips. I had already gone through the tutorial before I even started this, and didn't see anything refering to this problem. Is there a specific chapter that you are refering to, or is it just the tutorial in general? Also, what do you mean by "Input select board states"? If you mean playing the game so that 'X' wins, or they tie, or something like that, thanks, but we have been trying that for a while.

Thanks Again!!

by **thom** » Wed Dec 27, 2006 8:29 am

YAAAAAYYYYY!!!!!
I finally got it to recognize the end of a game!!!!

Now I am working on making it recognize ties. The work is going well.

THANKS TO EVERYONE WHO HELPED!!!

by **thom** » Wed Dec 27, 2006 10:39 am

I can't get the program to register a tie!!!
Here is my code, so if you know Javascript, please take a look and tell me anything that might be wrong.

Code: Select all: <HTML> <HEAD> <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. { 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) { 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.'); var winner = checkWin(); if(!winner) { //check to see if there is a tie if(numMoves == 9) status.innerHTML = 'Tie Game!'; } else gameOver = true; } </SCRIPT> <SCRIPT type=TEXT/JAVASCRIPT> function newgame() { numMoves = 0; gameOver = false; 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 = ' '; } } } </SCRIPT> <SCRIPT type=TEXT/JAVASCRIPT> function checkWin() { var gameOver = false; var numMoves = 0; 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 id=0_0 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_0 onclick=squareclicked (this); type=button value=" "> <INPUT id=2_0 onclick=squareclicked(this); type=button value=" "> <BR><INPUT id=0_1 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_1 onclick=squareclicked(this); type=button value=" "> <INPUT id=2_1 onclick=squareclicked(this); type=button value=" "> <BR><INPUT id=0_2 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_2 onclick=squareclicked(this); type=button value=" "> <INPUT id=2_2 onclick=squareclicked(this); type=button value=" "> <P id=status>X's turn</P><INPUT id=NEWGAME onclick=newgame(); type=button value="New Game"> </BODY> </HTML>

Thanks!

by **davidkallman** » Wed Dec 27, 2006 1:44 pm

thom:

I don't know javascript, so I can't comment in full. Based on the languages I know, right after:
status.HTML = 'Tie Game';
and before the "}"
there needs to be a:
gameOver = true;

In other words, once the number of moves is 9; the is over and a tie

by **thom** » Wed Dec 27, 2006 5:14 pm

Dave:
Thanks, but I tried it and it actually messed up my program.
I really do appreciate all the help that you have given me.

Thanks,

by **davidkallman** » Wed Dec 27, 2006 6:54 pm

thom:

Sorry the progam hasn't worked for you. As I mentioned previously, I don't know javascript, so I can't give you a definitive answer.

The thought is, however, to mark the game over and a tie when 9 moves have been made AND there is no winner. (A winner would take priority.)

by **thom** » Thu Dec 28, 2006 8:57 am

Okay, I've gotten the "tie game" to work, and it registers the end of the game. However, when "new game" button is clicked, it will reset the board, but does not reset the status bar, i.e., if "x" won the last game, the status bar still says "X wins", even after the "new game" button is clicked, instead of saying "X's turn", which is the default for starting a new game. I've tried going back through the code lots and lots of times, but haven't figured out exactly what needs to be changed to make this happen. Any ideas/tips? I've included my code so far below, in case that helps you at all. Thank you VERY much.

Code: Select all: <HTML> <HEAD> <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. { 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; } </SCRIPT> <SCRIPT type=TEXT/JAVASCRIPT> function newgame() { var winner = checkWin(); numMoves = 0; gameOver = false; 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 = ' '; } } } </SCRIPT> <SCRIPT type=TEXT/JAVASCRIPT> function checkWin() { var gameOver = false; var numMoves = 0; 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 bgColor="hotpink"> <INPUT id=0_0 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_0 onclick=squareclicked(this); type=button value=" "> <INPUT id=2_0 onclick=squareclicked(this); type=button value=" "> <BR><INPUT id=0_1 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_1 onclick=squareclicked(this); type=button value=" "> <INPUT id=2_1 onclick=squareclicked (this); type=button value=" "> <BR><INPUT id=0_2 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_2 onclick=squareclicked(this); type=button value=" "> <INPUT id=2_2 onclick=squareclicked(this); type=button value=" "> <P id=status>X's turn</P> <INPUT id=NEWGAME onclick=newgame(); type=button value="New Game"> </BODY></HTML>

by **thom** » Thu Dec 28, 2006 9:36 am

SOMEBODY PLEASE HELP!!! PPPPPPPPPLLLLLLLLLLLLLLEEEEEEEEEEEAAAAAAAAAAAAAASSSSSSSSSSSSSEEEEEEEEEEEEE!!!!!!!!!!!!!!!!!!!!!!!!!!!

by **davidkallman** » Fri Dec 29, 2006 10:03 am

thom:

I think there's a missing statement in the program: "gameOver = true;"

Please see below:

Â Â Â if(numMoves == 9) {
status.innerHTML = 'Tie Game!';
gameOver = true;
}

Please let me know if this works. It would indicate an error in the posted program.

Like I said, I don't know javascript, so please adjust to be valid javascript code.

Thanks.

by **davidkallman** » Fri Dec 29, 2006 10:46 am

thom:

I think there's a missing statement in the program: "gameOver = true;"

Please see below:

Â Â Â if(numMoves == 9) {
status.innerHTML = 'Tie Game!';
gameOver = true;
}

Please let me know if this works. It would indicate an error in the posted program.

Like I said, I don't know javascript, so please adjust to be valid javascript code.

Thanks.

by **thom** » Sat Dec 30, 2006 8:04 am

Dave-
Thanks, and I really appreciate you helping me so much. Unfortunately, by the time that I saw your latest post, one of my neighbors who programs had helped me fix my problem. Also, here is the corrected code, with all the errors that were on the site fixed:

Code: Select all: <HTML> <HEAD> <SCRIPT TYPE=TEXT/JAVASCRIPT> var xTurn = true; var gameOver = false; var numMoves = 0; var status = document.getElementById('status'); 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; } </SCRIPT> <SCRIPT type=TEXT/JAVASCRIPT> function newgame() { xTurn = true; gameOver = false; numMoves = 0; status = document.getElementById('status'); status.innerHTML = 'X\'s turn'; for(var x = 0; x < 3; x++) { for(var y = 0; y < 3; y++) { document.getElementById(x + '_' + y).value = ' '; } } } </SCRIPT> <SCRIPT type=TEXT/JAVASCRIPT> function checkWin() { var gameOver = false; var numMoves = 0; 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 id=0_0 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_0 onclick=squareclicked(this); type=button value=" "> <INPUT id=2_0 onclick=squareclicked(this); type=button value=" "> <BR><INPUT id=0_1 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_1 onclick=squareclicked(this); type=button value=" "> <INPUT id=2_1 onclick=squareclicked(this); type=button value=" "> <BR><INPUT id=0_2 onclick=squareclicked(this); type=button value=" "> <INPUT id=1_2 onclick=squareclicked(this); type=button value=" "> <INPUT id=2_2 onclick=squareclicked(this); type=button value=" "> <P id=status>X's turn</P> <INPUT id=NEWGAME onclick=newgame(); type=button value="New Game"> </BODY></HTML>

Thanks again,

Science Buddies: "Ask an Expert"

Help with Javascript tic tac toe

Help with Javascript tic tac toe

Re: Help with Javascript tic tac toe

Re: Help with Javascript tic tac toe

HIP HIP HOORAY!!!!!

Re: Help with Javascript tic tac toe

Re: Help with Javascript tic tac toe

Re: Help with Javascript tic tac toe

Who is online