View Full Version : Need help with a function

05-03-2008, 03:35 AM
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.

<html><head><title>Frog takes a walk</title>
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>")
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.

<body bgcolor="blue">
<input type="button" onclick="frog(' + i + ',' + j + ')" value="Frog Take a Walk" >

05-03-2008, 01:00 PM
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:

<img src="water.jpg" id="water1" />
In the javascript code to change the img you should just do the following:

document.getElementById("water1").src = "frog.jpg";