Help with Javascript tic tac toe

Ask questions about projects relating to: computer science or pure mathematics (such as probability, statistics, geometry, etc...).
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Help with Javascript tic tac toe

Post by thom »

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.
thom
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Re: Help with Javascript tic tac toe

Post by davidkallman »

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?
Cheers!

Dave
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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.
thom
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Re: Help with Javascript tic tac toe

Post by davidkallman »

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.
Cheers!

Dave
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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!! :D :D
thom
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

HIP HIP HOORAY!!!!!

Post by thom »

:D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D
YAAAAAYYYYY!!!!!
I finally got it to recognize the end of a game!!!!
:D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D
Now I am working on making it recognize ties. The work is going well.
:D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D
THANKS TO EVERYONE WHO HELPED!!!
:D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D
thom
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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!
thom
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Re: Help with Javascript tic tac toe

Post by davidkallman »

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
Cheers!

Dave
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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,
thom
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Post by davidkallman »

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.)
Cheers!

Dave
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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>
thom
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

SOMEBODY PLEASE HELP!!! PPPPPPPPPLLLLLLLLLLLLLLEEEEEEEEEEEAAAAAAAAAAAAAASSSSSSSSSSSSSEEEEEEEEEEEEE!!!!!!!!!!!!!!!!!!!!!!!!!!!
thom
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Re: Help with Javascript tic tac toe

Post by davidkallman »

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.
Cheers!

Dave
davidkallman
Former Expert
Posts: 675
Joined: Thu Feb 03, 2005 3:38 pm

Re: Help with Javascript tic tac toe

Post by davidkallman »

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.
Cheers!

Dave
thom
Posts: 14
Joined: Tue Dec 26, 2006 2:16 pm

Post by thom »

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,
thom
Locked

Return to “Math & Computer Science Sponsored by Hyperion Solutions Corp”