help with a small javascript

matecno

03-09-2007, 09:13 PM

Can anyone tell me what is wrong with this code that I wrote to manage the concentration game?

<html>
<head>


<title>The Concentration Game</title>
<link href="games.css" rel="stylesheet" type="text/css" />
<script src="tiles.js" type="text/javascript"></script>
<script>

var FlipCount, Tile1, Tile2;
FlipCount=0

//function ShowAll() {
//for(i=0; i<=15; i++) {
//document.write

//}
//}

function FlipBack() {
document.images[Tile1].src = "tile.jpg";
document.images.[Tile2].src = "tile.jpg";
FlipCount=0;
}

function CheckTiles() {
if (document.images[Tile1].src == document.images[Tile2].src) {
FlipCount=0;
}
else {
setTimeout("FlipBack()", 8);
}
}

function Flip(i) {
document.images.[i].src = Tiles[i].src;
if (FlipCount==0) {
Tile1=i;
FlipCount=1;
}
else {
Tile2=i;
CheckTiles();
}
}

</script>
</head>

<body>
<form action="">


<div id="board">
<a href="http://www.yahoo.com"><img src="tile.jpg" alt="" onClick="document.Flip(0)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(1)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(2)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(3)" width="75" height="75" /></a>
<br />
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(4)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(5)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(6)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(7)" width="75" height="75" /></a>
<br />
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(8)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(9)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(10)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(11)" width="75" height="75" /></a>
<br />
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(12)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(13)" width="75" height="75"/></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(14)" width="75" height="75" /></a>
<a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(15)" width="75" height="75" /></a>
</div>

<div id="main">
<p id="title">
<img src="logo.jpg" alt="Game Etc." width="240" height="55" />
</p>
<p>Play the Concentration game! Click the tiles on the left and
match pairs of identical images. Click the <b>Reload Tiles</b> button
below to randomize the position of the tiles and play again. Click the
<b>Show Tiles</b> button to view the solution.</p>
<p id="formp">
<input type="button" value="Reload Tiles" />  
<input type="button" value="Show Tiles" />
</p>
</div>

</form>
</body>
</html>

shyam

03-09-2007, 09:29 PM

stick to one convention when accessing attributes

document.images.Tile1.src
// or
document.images['Tile1'].src and everything else will fall in place :)

david_kw

03-09-2007, 09:34 PM

IMO, you either need to be more clear about what you think "is wrong" and post all relevent code (what is in tiles.js?) or even better is post a link to your page on the net somewhere so it can be tested and debugged.

david_kw

matecno

03-09-2007, 09:46 PM

tiles.js has:

/*
New Perspectives on JavaScript
Tutorial 5
Case Problem 2

Filename: tiles.js

Variables List:
x
Contains a array of numbers from 0 to 15. The order of the
numbers is set randomly using a for loop
Tiles
Contains an array of 16 image objects.

*/

var x = new Array();
x[0]=0;
x[1]=1;
x[2]=2;
x[3]=3;
x[4]=4;
x[5]=5;
x[6]=6;
x[7]=7;
x[8]=8;
x[9]=9;
x[10]=10;
x[11]=11;
x[12]=12;
x[13]=13;
x[14]=14;
x[15]=15;

for (i=0;i<=15;i++) {
ri=Math.floor(Math.random()*(16-i))+i;
temp=x[ri];
x[ri]=x[i];
x[i]=temp;
}

var Tiles = new Array();
Tiles[0]=new Image();
Tiles[1]=new Image();
Tiles[2]=new Image();
Tiles[3]=new Image();
Tiles[4]=new Image();
Tiles[5]=new Image();
Tiles[6]=new Image();
Tiles[7]=new Image();
Tiles[8]=new Image();
Tiles[9]=new Image();
Tiles[10]=new Image();
Tiles[11]=new Image();
Tiles[12]=new Image();
Tiles[13]=new Image();
Tiles[14]=new Image();
Tiles[15]=new Image();

Tiles[x[0]].src="image1.jpg";
Tiles[x[1]].src="image2.jpg";
Tiles[x[2]].src="image3.jpg";
Tiles[x[3]].src="image4.jpg";
Tiles[x[4]].src="image5.jpg";
Tiles[x[5]].src="image6.jpg";
Tiles[x[6]].src="image7.jpg";
Tiles[x[7]].src="image8.jpg";
Tiles[x[8]].src="image1.jpg";
Tiles[x[9]].src="image2.jpg";
Tiles[x[10]].src="image3.jpg";
Tiles[x[11]].src="image4.jpg";
Tiles[x[12]].src="image5.jpg";
Tiles[x[13]].src="image6.jpg";
Tiles[x[14]].src="image7.jpg";
Tiles[x[15]].src="image8.jpg";

david_kw

03-09-2007, 10:58 PM

Follow Shyam's advice. You have various syntax problems including some extra periods in your statements

document.images.[Tile2].src = "tile.jpg";

document.images.[i].src = Tiles[i].src;

Another thing you have is

setTimeout("FlipBack()", 8);

The value of '8' is 8 thousandths of a second. You probably meant 8000 (which is 8 seconds).

david_kw

matecno

03-09-2007, 11:15 PM

I did thesechanges guys but still got error on page when I click on any tile!! Any ideas?

_Aerospace_Eng_

03-09-2007, 11:54 PM

Post a link to your page.

david_kw

03-10-2007, 01:33 AM

I did thesechanges guys but still got error on page when I click on any tile!! Any ideas?

That's progress. You must have gotten the error before you clicked before. I agree with Aero though, post a link.

david_kw