FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Help with Javascript Aquarium

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


garionw
I am currently redesning the school's intranet. I have this script here (modified) as part of the background. I have a delimer though. The fish swim out only to 200 pixels or so to the right.

If anyone is able to help me, I can pay them (In Frih$)


Quote:
Code:

<html>
<head>
 <title>JavaScript Aquarium</title>
   <style type="text/css">
      body {
         overflow: hidden;
         margin: 0;
         background-color: steelblue;
      }
      #fishTank {
         position: absolute;
         width: 100%;
         height: 100%;
         bottom: 0;
         top: 0;
         overflow: hidden;
      }
      img {
         position: absolute;
      }
   </style>

   <script type="text/javascript">
   <!--
      /* .. */   function Fish(ownName) {
      /* .1 */      this.fishType = Math.round(Math.random() * 7) + 1;               // choose fish type (1-8)
      /* .2 */      this.positionX = Math.round(Math.random() * document.body.clientHeight);                  // choose random start X co-ordinate
      /* .3 */      this.positionY = Math.round(Math.random() * document.body.clientWidth);                  // choose random start Y co-ordinate
      /* .4 */      while (!(this.directionX = Math.round(Math.random() * 2) - 1));         // choose random X direction (left or right)
      /* .5 */      while (!(this.directionY = Math.round(Math.random() * 2) - 1));         // choose random Y direction (up or down)
      /* .. */
      /* .6 */      document.getElementById('fishTank').appendChild(this.canvas = document.createElement('img'));
      /* .7 */      this.canvas.style.left = this.positionX + 'px';
      /* .8 */      this.canvas.style.top = this.positionY + 'px';
      /* .9 */      setInterval('window[\'' + ownName + '\'].animate();', (Math.round(Math.random() * 4) + 3) * 10);      // choose random speed (20, 30, 40, 50, 60)
      /* .. */   }
      /* 10 */   Fish.prototype.animate = FishAnimate;

      /* .. */   function FishAnimate() {
      /* 11 */      if ((newImageName = 'fish' + this.fishType + (this.directionX > 0 ? '_flipped' : '') + '.gif') != this.canvas.src.substr(this.canvas.src.lastIndexOf('/') + 1)) this.canvas.src = newImageName;
      /* 12 */      xPos = parseInt(this.canvas.style.left, 10) + this.directionX;
      /* 13 */      yPos = parseInt(this.canvas.style.top, 10) + this.directionY;
      /* 14 */      if (xPos > 610 || Math.round(Math.random() * 200) > 199) this.directionX = 0-(Math.round(Math.random()) + 1);
      /* 15 */      if (xPos < -75 || Math.round(Math.random() * 200) > 199) this.directionX = Math.round(Math.random()) + 1;
      /* 16 */      if (yPos > 390 || Math.round(Math.random() * 200) > 199) this.directionY = -1;
      /* 17 */      if (yPos < 10 || Math.round(Math.random() * 200) > 199) this.directionY = 1;
      /* 18 */      this.canvas.style.left = xPos + 'px';
      /* 19 */      this.canvas.style.top = yPos + 'px';
      /* .. */   }

      /* .. */   function createFish() {
      /* .. */      // The loop count below changes the number of fish
      /* 20 */      for (var loop=0; loop<30; loop++) window['fish' + loop] = new Fish('fish' + loop);
      /* .. */   }
   //-->
   </script>
</head>

<body onload="createFish();">
   <div id="fishTank"></div>
</body>

</html>

[/quote]
fantasymanageronline
I think the problem is in line 14.

I have changed the number to 1000 (I am using 1024x768 screen resolution) and it worked perfect.

You might need to get the window width and set it as value.

Regards.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.