Science Buddies: "Ask an Expert"

Posted: **Thu Apr 18, 2013 8:01 pm**

Hi. I am using dream weaver, I don't exactly know how to code. I kinda bit off more then i can chew. I only took a few lessons off of codecademy.com I'm stuck here, and don't know exactly what to do. I dont get the x+ __ + y thing at all. I have all the layout but there is no X or O when i click on the buttons.

Code: Select all

<!DOCTYPE html>

	<head>
		<SCRIPT TYPE="TEXT/JAVASCRIPT">
		function newgame(){
			var status = document.getElementById('status');
		
				var xTurn=true;
				status.innerHTML = 'X\'s turn';
				
				for (var x=0; x < 14;x++)	{
					for (var x=0; x< 14;x++)	{
						document.getElementById(x + '_' + y).value = ' ';
					}
				}
			}
				function squareclicked(square) 
				{	
					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('Stop fooling around. Pick another square.');
				}
				var gameOver = false;
				var numMoves = 0;
				function checkWin()
				{
				var status = document.getElementById('status');
				
					var val0;
					var val1;
 					var val2;
					
					for(var y = 0; y<15;  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;
						}
						}
					
					
					
				    }
					for(var x = 0; x<15; 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!";
						\\line 76 
                                                return true;
						}
						else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
						{	
							status.innerHTML = "O WINS!";
						return true;
						}
						
						}
				}


		<title>Tic Tac Toe Experiment
    	</title>
		</SCRIPT>
	</head>
	<h1>Tic Tac Toe</h1>
	<body>
	<p>
    <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);">
    <h1>    
    </h1>
	<BR>
	<input type="BUTTON" id="NEWGAME" value="New Game" onClick="newgame();">
	</p>
	</body>
	<P ID="status">X's turn</P>
</html>

Posted: **Tue Apr 23, 2013 3:50 pm**

KhaCung,

You seem to be pretty far along, but I gather you have gotten stuck in the debugging process. Not to worry, professional programmers spend about half their time debugging. Not surprisingly, there are tools called debuggers to assist you.

Try doing all of your testing in Firefox with the Firebug plugin turned on. This is where you can get the plugin:

https://addons.mozilla.org/en-us/firefox/addon/firebug/

This is a widely used tool that vastly simplifies the process. Once you have installed it, go to the Tools|Web Developer menu tab and select it. At the bottom of your window you should see the Firebug window panes. Each time you make a change to your code, reload the page and start to use it. Firebug will point out runtime errors that you can fix one at a time. To begin with, you seem to have an extra "}" on line 67, and you used backslashes instead of slashes on line 76. Keep working with Firebug and you will eventually fnd and fix all of your errors.

Please let us know how it goes.

Good luck!

Heinz Hemken

Posted: **Sun Apr 28, 2013 12:02 pm**

Thanks for the help. after a few days of debugging I finally got it to work! Now I need to do the AI, but I don't exactly know where to start. I read the experimental procedure, but it is all very vague. I've read up on the past forums, but that doesn't help me at all, since they make boxes a variable, and ifthen statements where box1=box1+10;. Can anyone tell me what is the reason for using this? I don't know where to start. I've made this code and for some reason, everytime I click on the square it is always O. I'm trying to make X go first but it's always just me. Should i just make it so that the middle square always equals X?

Code: Select all

<!DOCTYPE html>
<head>
<SCRIPT TYPE = "TEXT/JAVASCRIPT">
var ties = document.getElementById('ties');
var AITurn = true;
var oTurn = false;
var status = document.getElementById('status');
var xWins = 1;
var oWins= 1;
var gameOver = false;
var numMoves = 0;
var noWins=0;
var winsO = document.getElementById('winsO');
var winsX = document.getElementById('winsX');
//Boxesvar 
var box1 = document.getElementById('0_0');
var box2 = document.getElementById('1_0');
var box3 = document.getElementById('2_0');
var box4 = document.getElementById('0_1');
var box5 = document.getElementById('1_1');
var box6 = document.getElementById('2_1');
var box7 = document.getElementById('0_2');
var box8 = document.getElementById('1_2');
var box9 = document.getElementById('2_2');
function squareclicked(square)
{	
if(gameOver)
{
		alert("The Game is over.")
		return;
}
	var status = document.getElementById('status')
	var value= square.value;
	if(value != 'X' && value != 'O')
	{
		if (AITurn)
		{	numMoves++;
			AImove();
			status.innerHTML = 'O\'s turn';
			oTurn = true;
			AITurn = false;
		}
		if (oTurn = true)
			{
				oTurn = false;
				square.value = 'O';
				status.innerHTML = 'X\'s turn';
				numMoves++;
				AITurn = true;
			}
	}
		else
			alert('Stop fooling around. Pick another square.');
var winner = checkWin()
if(!winner)
{
	var ties = document.getElementById('ties');
	if(numMoves == 9){
	noWins++;
	status.innerHTML = 'Tie Game!';
	ties.innerHTML = 'Tie Games:' + noWins;}
}
else 
	gameOver=true
}

function AImove()
{if (box5 = ' ')
	{
		box5 ='X';
	}
}
</script>

<script type = "Text/Javascript">
function newgame()
{	
	numMoves=0;
	status = document.getElementById('status');
	gameOver = false;
	AITurn=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">
if (status.innerHTML = "X WINS!")
//checking for the winner
function checkWin()
{	
var winsO = document.getElementById('winsO');
var winsX = document.getElementById('winsX');
var status = document.getElementById('status');
var val0;
var val1;
var val2;
var gameOver = false;
var numMoves=0;
	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')
		{
			winsX.innerHTML ="X Wins:" + xWins;
			xWins++;
			status.innerHTML = "X WINS!";
			return true;
		}
		else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
		{
			winsO.innerHTML="O Wins:" +oWins;
			oWins++;
			status.innerHTML = "O WINS!";
			return true;
		}
		
	}
	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')
		{
			winsX.innerHTML ="X Wins:" + xWins;
			xWins++;
			status.innerHTML = "X WINS!";
			return true;
		}
		else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
		{	winsO.innerHTML="O Wins:" +oWins;
			oWins++;
			return true;
		}
	}
	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')
	{
		winsX.innerHTML ="X Wins:" + xWins;
		xWins++
		status.innerHTML = "X WINS!";
		return true;
	}
	else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
	{	winsO.innerHTML="O Wins:" + oWins;
		oWins++;
		status.innerHTML = "O WINS!";
		return true;
	}
	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')
	{
		winsX.innerHTML ="X Wins:" + xWins;
		xWins++;
		status.innerHTML = "X WINS!";
		return true;
	}
	else if(val0 =='O' && val1 == 'O' && val2 == 'O')
	{	winsO.innerHTML="O Wins:" +oWins;
		oWins++;
		status.innerHTML = "O WINS!";
		return true;
	}

	
} 

</script>
<title>Tic Tac Toe</title>
</head>
<P ID="status">X's turn</P>
<P ID="winsX">X Wins:0</P>
<P ID="ties">Tie Games:0</P>
<P ID="winsO">O Wins:0</P>
<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();">
</body>
</html>

Posted: **Wed May 01, 2013 11:23 am**

KhaCung,

I don't see where you put an X on a box when you click on it, just this section where you set the 'O':

Code: Select all

       if(value != 'X' && value != 'O')
       {
          if (AITurn)
          {   numMoves++;
             AImove();
             status.innerHTML = 'O\'s turn';
             oTurn = true;
             AITurn = false;
          }
          if (oTurn = true)
             {
                oTurn = false;
                square.value = 'O';
                status.innerHTML = 'X\'s turn';
                numMoves++;
                AITurn = true;
             }
       }
          else
             alert('Stop fooling around. Pick another square.');

Try walking through your code by hand to see what happens whenever the user clicks on a box. That should help you find what's missing.

Good Luck!

Heinz Hemken

Science Buddies: "Ask an Expert"

Tic Tac Toe Syntax error

Tic Tac Toe Syntax error

Re: Tic Tac Toe Syntax error

Re: Tic Tac Toe Syntax error

Re: Tic Tac Toe Syntax error