Member Avatar for sha1023012

Ok i have been working on this for a few days. I am having a hard time on this one. I am still new to the javascript/DHTML. I am suppose to use the fish images to create a fish tank on a Web page.The fish should swim across the screen from both directions. I was only able to get on of the fish to swim.. Can someone help me understand what to do.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <![CDATA[
var fish1Position = 0;
horizontal = new Array(50);
var fillPosition = 10;
for(var i = 0; i < 50; ++i) {
        horizontal[i] = fillPosition;
        fillPosition += 10;
}
function fish1Swim() {
        document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
        ++fish1Position;
        if (fish1Position == 49)
                fish1Position = 0;
}
function startSwimming() {
        setInterval(fish1Swim, 100);
}
// ]]>
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 123 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by twiss
Member Avatar for twiss

If this code does what you want for fish #1, you could try something like:

var fishPositions = {}, horizontal = [];
for(var fillPosition = 50; fillPosition < 500; fillPosition += 10)
        horizontal[] = fillPosition;
function fishSwim(id) {
        document.getElementById(id).style.left = horizontal[fishPositions[id]] + "px";
        fishPositions[id]++;
        if (fishPositions[id] == 49) fishPositions[id] = 0;
}
function startSwimming() {
        setInterval(function() {
                fishSwim('fish1');
                fishSwim('fish2');
                fishSwim('fish3');
        }, 100);
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.