SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Columbus, Ohio
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Traveling Animation

    I am in school and have this assignment to create a fish tank with fish moving across the screen using JS. All the fish are moving left to right except fish #2. I want that to move right to left. I was provided with some code and I had to put it together and add what was missing. I did that and it works fine except I cannot figure out how to make fish #2 move the opposite direction. Any comments on how to change the code for that fish? This is my coding:

    Code:
    <!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 Tanks</title>
    
    <script type="text/javascript">
    <!-- HIDE FROM INCOMPATIBLE BROWSERS
    
       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;
           }
    
       var fish2Position = 0;
          horizontal = new Array(50);
          var fillPosition = 10;
          for(var i = 0; i < 50; ++i) {
             horizontal[i] = fillPosition;
             fillPosition += 10;
             }
          function fish2Swim() {
            document.getElementById("fish2").style.left = horizontal[fish2Position] + "px";
            ++fish2Position;
            if (fish2Position == 49)
            fish2Position = 0;
           }
    
       var fish3Position = 0;
          horizontal = new Array(50);
          var fillPosition = 10;
          for(var i = 0; i < 50; ++i) {
             horizontal[i] = fillPosition;
             fillPosition += 10;
             }
          function fish3Swim() {
            document.getElementById("fish3").style.left = horizontal[fish3Position] + "px";
            ++fish3Position;
            if (fish3Position == 49)
            fish3Position = 0;
           }
    
       var fish4Position = 0;
          horizontal = new Array(50);
          var fillPosition = 10;
          for(var i = 0; i < 50; ++i) {
             horizontal[i] = fillPosition;
             fillPosition += 10;
             }
          function fish4Swim() {
            document.getElementById("fish4").style.left = horizontal[fish4Position] + "px";
            ++fish4Position;
            if (fish4Position == 49)
            fish4Position = 0;
           }
    
       var fish5Position = 0;
          horizontal = new Array(50);
          var fillPosition = 10;
          for(var i = 0; i < 50; ++i) {
             horizontal[i] = fillPosition;
             fillPosition += 10;
             }
          function fish5Swim() {
            document.getElementById("fish5").style.left = horizontal[fish5Position] + "px";
            ++fish5Position;
            if (fish5Position == 49)
            fish5Position = 0;
           }
    
       function startSwimming() {
          setInterval("fish1Swim()",100);
          setInterval("fish2Swim()",200);
          setInterval("fish3Swim()",130);
          setInterval("fish4Swim()",170);
          setInterval("fish5Swim()",80);
          }
    
    // STOP HIDING FROM INCOMPATIBLE BROWSERS -->
    </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:100px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
    
       <p><span id="fish3" style=
       "position:absolute; left:10px; top:210px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
    
       <p><span id="fish4" style=
       "position:absolute; left:10px; top:300px"><img src="fish4.gif" alt="Image of a fish" /></span></p>
    
       <p><span id="fish5" style=
       "position:absolute; left:10px; top:390px"><img src="fish5.gif" alt="Image of a fish" /></span></p>
    
    </body>
    </html>
    Last edited by TechnoBear; Dec 13, 2012 at 13:47. Reason: Code tags added

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Instead of adding to the position you need to subtract.

    Instead of resetting the position to 0 when it gets to 49 you need to reset the position to 49 when it gets to 0.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Columbus, Ohio
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you Stephen. I knew it was in that area but was plugging in the wrong info. Works great now. Thanks


Bookmarks

Posting Permissions

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