Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with keeping track of images in array

    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>

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,517
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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 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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •