Need help with keeping track of images in array

noobatjavascrip

09-28-2012, 05:15 AM

This is a hw assignment... and know its frowned upon.
Im not looking for the answer just some help.
I have to have 1 image sliced into 4 separate images.
I have to have them in a predetermined order and when you click on a image it swaps them. Ultimately when the images are all in the right place, it makes the picture whole. The part i am having trouble with is knowing when they are in the right order and setting an alert to let the user know they are in the right order.

I know i need to set an 2 arrays. One of the solved order and one to keep track of the order they are in but i cant seem how to figure that part out

here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript" type="text/javascript">

C=[0,0,0,0]
F=["images/tree_01.jpg","images/tree_02.jpg","images/tree_03.jpg","images/tree_04.jpg"]
function f(n)
{

A=document.images[n].src.split("/")
L=A.length
last=A[L-1]
alert(last + "\n" + F + )

}

function swap(n){
remember = document.images[0].src
document.images[0].src = document.images[2].src
document.images[2].src = document.images[3].src
document.images[3].src = document.images[1].src
document.images[1].src = remember
f(n)

}
/*
function testSolved(){

//assume all pieces are in right place
// puzzleissolved=true
//is piece zero in right place?
//if (the name of the first file is not what we think it should be)
// if (document.imgaes[0].src!=F[0])
// puzzlesolved=false
//then puzzlesolved=false
//if not remember it
//is piece one in right place?
//if not remember it
//is piece two in right place?
//if not remember it
//is piece three in right place?
//if not remember it
//now ask if we remember finding anythying out of place
//if so puzzle isnt solved
//if not puzzle is solved and we celebrate
}

*/

</script>

</head>
<body bgcolor="#ffcc99" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
</br>
</center>
</br>
</br>
<center><table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/tree_03.jpg" width="200" height="150" onclick="swap(0) "></td>
<td>
<img src="images/tree_01.jpg" width="200" height="150" onclick="swap(1)"></td>
</tr>
<tr>
<td>
<img src="images/tree_04.jpg" width="200" height="150" onclick="swap(2) "></td>
<td>
<img src="images/tree_02.jpg" width="200" height="150" onclick="swap(3) "></td>
</tr>
</table>
</body>
</html>

timgolding

09-28-2012, 09:46 AM

maybe loops through document.images[x].src and compare them to F[x] if all are the same then return true otherwise return false. You need to call the function from somewhere also. I could give you the code but want you to do it because it is homework and you need to learn from it

vwphillips

09-28-2012, 11:06 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var Finish=['One.gif','Two.gif','Three.gif','Four.gif'];
var Start=['One.gif','Four.gif','Three.gif','Two.gif'];

var Finish1=['One.gif','Two.gif','Three.gif','Four.gif','Five.gif'];
var Start1=['One.gif','Four.gif','Three.gif','Two.gif','Five.gif'];

function Swap(img,nu,id,finish,start){
var srt=window[start],fin=window[finish],z0=0;
if (!Swap[id]){
Swap[id]=[]; // make an array as a property of function Swap with a name of id
}
if (!Swap[id][0]){
Swap[id][0]=[img,img.src,nu];
}
else if (img!=Swap[id][0][0]){
Swap[id][1]=[img,img.src];
Swap[id][0][0].src=Swap[id][1][1];
Swap[id][1][0].src=Swap[id][0][1];
srt[nu]=Swap[id][0][1].substring(Swap[id][0][1].lastIndexOf('/')+1);
srt[Swap[id][0][2]]=Swap[id][1][1].substring(Swap[id][1][1].lastIndexOf('/')+1); // chop the src to only the file name
Swap[id]=[];
for (;z0<fin.length;z0++){
if (fin[z0]!=srt[z0]){
return;
}
}
alert('complete');
}
}

/*]]>*/
</script>
</head>

<body>

<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="100" height="100" onmouseup="Swap(this,0,'tst','Finish','Start');" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="img" width="100" height="100" onmouseup="Swap(this,1,'tst','Finish','Start');" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="img" width="100" height="100" onmouseup="Swap(this,2,'tst','Finish','Start');" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="img" width="100" height="100" onmouseup="Swap(this,3,'tst','Finish','Start');" />
<br />
<br />

<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="100" height="100" onmouseup="Swap(this,0,'tom','Finish1','Start1');" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="img" width="100" height="100" onmouseup="Swap(this,1,'tom','Finish1','Start1');" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="img" width="100" height="100" onmouseup="Swap(this,2,'tom','Finish1','Start1');" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="img" width="100" height="100" onmouseup="Swap(this,3,'tom','Finish1','Start1');" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="img" width="100" height="100" onmouseup="Swap(this,4,'tom','Finish1','Start1');" />

</body>

</html>

Logic Ali

09-28-2012, 01:53 PM

I don't think you've got to the point of needing to detect the order.
Your image swapping code makes no sense. You're passing a parameter that doesn't get used, and how does the user know what effect clicking on any image will have?

xelawho

09-28-2012, 02:53 PM

rather than just feeding you the answer, it's probably going to be more helpful if you think this through in plain terms before trying to translate it to code. What it sounds like you need is:
- a starting array of jumbled images
- an array that contains the correct order
- a way of choosing one image to swap (the onclick event of the image tag, like you have, works for this)
- a way of choosing where to place that image (again, the onclick event of the image tag, like you have, works for this)
- a way of changing the jumbled array based on the user's choice (this page (http://www.w3schools.com/jsref/jsref_obj_array.asp) is flawed in many ways, but gives a good overview of your options here and examples on how to use them)
- a way of populating the image sources based on the new array order
- a way of comparing the new array to the one with the correct order

if that sounds about right, maybe you could start coding it and come back if you run into specific problems