Jump to content


JavaScript - debug my work please

Started by lee890910, May 28 2006 04:30 PM

1 reply to this topic

#1 lee890910

    Young Padawan

  • Members
  • Pip
  • 21 posts

Posted 28 May 2006 - 04:30 PM

Hi, I am trying to create a game. When a player clicks on a marble, then it changes the color of that marble, blue to yellow or yellow to blue, and all marbles that touches it. Buttons are numbered from 0 to 8, from upper left to lower right. So for eg. clicking on the lower left marble (#6) also changes number 3 and number 7. To win, the player has to turn the center button yellow and the rest to blue and if the player wins, then give an alert saying you won.

When the player presses on New Game, it should randomly assign a blue or yellow button to each image.

here is the work I did so far:

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<title>Project_5</title>
</head>

<body bgcolor="#FFFFFF">
<script language="JavaScript">
<!--

function newGame()
{
	var x
	for(i=0;i<10;i++)
	{
		x = Math.random();
		if(x==0)
			{
			window.document.image[i].src = "BlueButton.gif"
			}
			elseif(x==1)
			{
			window.document.image[i].src = "YellowButton.gif"
			}
		}
	}
}

function doButton(0)
{
	if(document.img.color[0].src=="BlueButton.gif")
		{
		document.img.color[2].src = "YellowButton.gif";
		document.img.color[4].src = "YellowButton.gif";
		}
		elseif(document.img.color[0].src=="YellowButton.gif")
		{
		document.img.color[2].src = "BlueButton.gif";
		document.img.color[4].src = "BlueButton.gif";
		}
}

function doButton(1)
{
	if(document.img.color[1].src=="BlueButton.gif")
		{
		document.img.color[0].src = "YellowButton.gif";
		document.img.color[2].src = "YellowButton.gif";
		document.img.color[4].src = "YellowButton.gif";
		}
		elseif(document.img.color[1].src=="YellowButton.gif")
		{
		document.img.color[0].src = "BlueButton.gif";
		document.img.color[2].src = "BlueButton.gif";
		document.img.color[4].src = "BlueButton.gif";
		}
}

function doButton(2)
{
	if(document.img.color[2].src=="BlueButton.gif")
		{
		document.img.color[1].src = "YellowButton.gif";
		document.img.color[5].src = "YellowButton.gif";
		}
		elseif(document.img.color[2].src=="YellowButton.gif")
		{
		document.img.color[1].src = "BlueButton.gif";
		document.img.color[5].src = "BlueButton.gif";
		}
}

function doButton(3)
{
	if(document.img.color[3].src=="BlueButton.gif")
		{
		document.img.color[0].src = "YellowButton.gif";
		document.img.color[4].src = "YellowButton.gif";
		document.img.color[6].src = "YellowButton.gif";
		}
		elseif(document.img.color[3].src=="YellowButton.gif")
		{
		document.img.color[0].src = "BlueButton.gif";
		document.img.color[4].src = "BlueButton.gif";
		document.img.color[6].src = "BlueButton.gif";
		}
}

function doButton(4)
{
	if(document.img.color[4].src=="BlueButton.gif")
		{
		document.img.color[1].src = "YellowButton.gif";
		document.img.color[3].src = "YellowButton.gif";
		document.img.color[5].src = "YellowButton.gif";
		document.img.color[7].src = "YellowButton.gif";
		}
		elseif(document.img.color[4].src=="YellowButton.gif")
		{
		document.img.color[1].src = "BlueButton.gif";
		document.img.color[3].src = "BlueButton.gif";
		document.img.color[5].src = "BlueButton.gif";
		document.img.color[7].src = "BlueButton.gif";
		}
}

function doButton(5)
{
	if(document.img.color[5].src=="BlueButton.gif")
		{
		document.img.color[2].src = "YellowButton.gif";
		document.img.color[4].src = "YellowButton.gif";
		document.img.color[8].src = "YellowButton.gif";
		}
		elseif(document.img.color[5].src=="YellowButton.gif")
		{
		document.img.color[2].src = "BlueButton.gif";
		document.img.color[4].src = "BlueButton.gif";
		document.img.color[8].src = "BlueButton.gif";
		}
}

function doButton(6)
{
	if(document.img.color[6].src=="BlueButton.gif")
		{
		document.img.color[3].src = "YellowButton.gif";
		document.img.color[7].src = "YellowButton.gif";
		}
		elseif(document.img.color[6].src=="YellowButton.gif")
		{
		document.img.color[3].src = "BlueButton.gif";
		document.img.color[7].src = "BlueButton.gif";
		}
}

function doButton(7)
{
	if(document.img.color[7].src=="BlueButton.gif")
		{
		document.img.color[4].src = "YellowButton.gif";
		document.img.color[6].src = "YellowButton.gif";
		document.img.color[8].src = "YellowButton.gif";
		}
		elseif(document.img.color[7].src=="YellowButton.gif")
		{
		document.img.color[4].src = "BlueButton.gif";
		document.img.color[6].src = "BlueButton.gif";
		document.img.color[8].src = "BlueButton.gif";
		}
}

function doButton(8)
{
	if(document.img.color[8].src=="BlueButton.gif")
		{
		document.img.color[5].src = "YellowButton.gif";
		document.img.color[7].src = "YellowButton.gif";
		}
		elseif(document.img.color[8].src=="YellowButton.gif")
		{
		document.img.color[5].src = "BlueButton.gif";
		document.img.color[7].src = "BlueButton.gif";
		}
}

//-->
</script><br>
<FORM ID=img NAME=img>
<p align="center"><font size="5">Click a button to change it and
its neighbors. <br>
To win, turn the center button yellow and the rest to blue.</font>
</p>

<p align="center"><img src="BlueButton.gif" width="30"
height="30" onclick="doButton(0)"> <img src="BlueButton.gif"
width="30" height="30" onclick="doButton(1)"> <img
src="BlueButton.gif" width="30" height="30" onclick="doButton(2)">
<br>
<img src="BlueButton.gif" width="30" height="30"
onclick="doButton(3)"> <img src="BlueButton.gif" width="30"
height="30" onclick="doButton(4)"> <img src="BlueButton.gif"
width="30" height="30" onclick="doButton(5)"> <br>
<img src="BlueButton.gif" width="30" height="30"
onclick="doButton(6)"> <img src="BlueButton.gif" width="30"
height="30" onclick="doButton(7)"> <img src="BlueButton.gif"
width="30" height="30" onclick="doButton(8)"> </p>

<p align="center"><input type="submit" name="B1" value="New Game"
onClick="newGame()"></p>
</FORM>
</body>
</html>

Can someone help debug it for me? i think i have alot of errors on this one.

#2 Futingkiller

    Young Padawan

  • Members
  • Pip
  • 110 posts

Posted 29 May 2006 - 08:19 AM

here it is :
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<title>Project_5</title>
</head>

<body bgcolor="#FFFFFF">
<script language="JavaScript">
<!--
var Picture=new Array(0,0,0,0,0,0,0,0,0)
function newGame()
{
	var x
	for(i=0;i<9;i++)
	{
		x =Math.floor(Math.random()*2);
		Picture[i]=x;
		if(x==0)
			{
		   document.img.color[i].src = "BlueButton.gif"
		   }
			else
			{
		   document.img.color[i].src = "YellowButton.gif"
			}
	  }
}

function doButton(a)
{
if ( ( a-3 ) >=0)
	{
	document.img.color[a-3].src=(Picture[a]==0)? "YellowButton.gif" : "BlueButton.gif"
	Picture[a-3]=(Picture[a]==0)? 1 : 0
	}
if ( ( a+3 ) <=8)
	{
	document.img.color[a+3].src=(Picture[a]==0)? "YellowButton.gif" : "BlueButton.gif"
	Picture[a+3]=(Picture[a]==0)? 1 : 0
	}
if (( (a-1)%3 != 2 )&&(a!=0))
	{
	document.img.color[a-1].src=(Picture[a]==0)? "YellowButton.gif" : "BlueButton.gif"
	Picture[a-1]=(Picture[a]==0)? 1 : 0
	}
if ( ((a+1) % 3) !=0 )
	{
	document.img.color[a+1].src=(Picture[a]==0)? "YellowButton.gif" : "BlueButton.gif"
	Picture[a+1]=(Picture[a]==0)? 1 : 0
	}
}

//-->
</script><br>
<FORM ID=img NAME=img>
<p align="center"><font size="5">Click a button to change it and
its neighbors. <br>
To win, turn the center button yellow and the rest to blue.</font>
</p>

<p align="center">
<a onclick="doButton(0)" ><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
<a onclick="doButton(1)"><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
<a onclick="doButton(2)"><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
<br>
<a onclick="doButton(3)"><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
<a onclick="doButton(4)"><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
<a onclick="doButton(5)"><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
<br>
<a onclick="doButton(6)"><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
<a onclick="doButton(7)" ><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
<a onclick="doButton(8)"><img name='color' src="BlueButton.gif" width="30" height="30" ></a>
</p>
<p align="center"><input type="button" value="New Game" onClick="newGame()">
</p>
</FORM>
</body>
</html>
1)
first mistake was the images, they had no name (you forgot about that)
2)
the <a onclick='...'> is because on Netscape 4.0 and 6.0 you can't put onclick on an image
3)
you can't define function like you did
you need to have a variable in the () so it could work. i used the variable "a"
4)
you can't verify the src of an image like that (the src of an image is: c:/docume~1/......./BlueButton.gif)
5)
the Picture array is used to know what picture is in each place:
0--> blueButton
1-->yellowbutton
6)
Picture[a-1]=(Picture[a]==0)? 1 : 0 is a ternary operator.
The general : variable=(condition)? expresion1 : expresion2
the meaning of it is:
if (condition) { variable=expresion1;} else {variable=expresion2}
7)
Math.random() generates numbers between 0 and 1, but it doesn't take the value 1-->[1,0)
it generates numbers like 0.234323423.
8)
it never tells you if you won :). make a function that verifies if Picture[4]==1 and the rest are 0; after it alert's you that you won, newGame();
9)
dont use input type='submit' because it's PhP related only, use input type='button'. It's the same, the only diference is that it's javascript related (it doesn't submit the form)
10)
it doesn't exist elseif, if you realy want to, use else if(cond) with a space between them

if you don't understand what i did in doButton function, ask me

Edited by Futingkiller, 29 May 2006 - 08:25 AM.

Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design