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 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with a function

    I am having the hardest time with this function. I have a table with randomized "water" images in it. When the user clicks on the "water" they can lay a lily pad down. When the user clicks the button, a frog should replace the first lily pad image, and then appear to move to each lily pad that the user placed on the screen. Each time the frog "jumps", the lily pad should return so it looks like the image is moving in a defined pattern.

    If the user clicks lily pads into a rectangle pattern, I want one frog to look like it is moving the whole way around it.

    Can anyone help me? I am trying to make a simple little game for my daughter and she would be quite pleased to see it work. Thanks in advance.

    Code:
    <html><head><title>Frog takes a walk</title>
    <script>
    function pond() { 
      document.write ("<table border=0  cellspacing=0 cellpadding=0>") 
      for (i = 1; i <= 10; i++) { 
        document.write ("<tr>") 
        for (j = 1; j <= 10; j++) { 
          document.write ("<td>") 
    	  document.write ("<img src='water1.jpg' width='60' height='60' ") 
    	  document.write ("name='row" + i + "col" + j + "'")
    	  document.write (" onmousedown=lily(" + i + "," + j + ")>") 
          document.write ("</td>") 
        } 
        document.write ("</tr>") 
      } 
      document.write ("</table><br>")
      for(p=0;p<document.images.length;p++){  
             r=Math.ceil(Math.random()*9)
             document.images[p].src="water" + r +".jpg"
          }  
    } 
    
    function lily(i,j){
    document.images['row' + i + 'col' + j].src = "R.jpg"
    }	
    
    	
    function frog(i,j){
    //Help needed here.  When you click the button, I want the frog image to "jump" onto the lily 
    //pads that the user clicked onto the screen via the onmousedown.  What I really mean is when
    //the button is clicked, the lily pad image should be replaced with a frog image and when the frog
    //jumps to the next image, the lily pad should return and so on.  The whole thing
    //should appear to be moving in the pattern defined by the user.
    
    }
    </script>
    </head>
    <body bgcolor="blue">
    <script>
      pond()
    </script>
    <form>
    <input type="button" onclick="frog(' + i + ',' + j + ')" value="Frog Take a Walk" >
    </form>
    </body>
    </html>
    Last edited by jackbergman; 05-03-2008 at 03:15 AM.

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    First of all, I'd recommend to stop using document.write and instead use document.getElementById("elementName").innerHTML.

    Second, if you define unique IDs for each td you want a frog to "jump" in, you'll be able to do that. For example:
    Code:
    <img src="water.jpg" id="water1" />
    In the javascript code to change the img you should just do the following:
    Code:
    document.getElementById("water1").src = "frog.jpg";


  •  

    Posting Permissions

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