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
  • 136 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by twiss

Dani AI

Generated

A few focused points to get all three fish moving reliably.

’s page shows only the top fish being updated because the animation logic runs for a single fish. is on the right track with a shared loop, but the example there has a small syntax slip (use array.push() rather than horizontal[] = …) and misses per-fish initialization. The clean, robust pattern is to treat each fish as an object (element, numeric x, velocity) and update every fish from a single animation loop. That avoids multiple timers and index confusion, and it makes wraparound and direction changes easy.

Use transform-based movement for smoother animation and GPU acceleration, flip the sprite by scaleX(-1) when the velocity is negative, and base wraparound on the container and element widths. Prefer requestAnimationFrame to setInterval for better timing and battery use (requestAnimationFrame docs, CSS transform docs).

Example approach (minimal):

<script>
function startTank() {
  var tank = document.getElementById('tank');
  var fishes = ['fish1','fish2','fish3'].map(function(id, i){
    return {el: document.getElementById(id), x: i*150, vx: i===1 ? -2 : 1};
  });
  function frame(){
    fishes.forEach(function(f){
      f.x += f.vx;
      var w = f.el.getBoundingClientRect().width;
      if (f.x > tank.clientWidth) f.x = -w;
      if (f.x < -w) f.x = tank.clientWidth;
      f.el.style.transform = 'translateX(' + f.x + 'px) scaleX(' + (f.vx < 0 ? -1 : 1) + ')';
    });
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}
</script>

Troubleshooting: ensure the fish elements exist before starting (run onload or DOMContentLoaded), give the tank position:relative and fish position:absolute, and preload images if layout jumps occur. If supporting very old browsers, fall back to setInterval, but keep a single loop rather than one timer per fish.

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.