Jump to content
Killersites Community
Sign in to follow this  
Rick

Traveling Animation

Recommended Posts

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:

 

<!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 = 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 = 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 = 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 = 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 = 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>

Share this post


Link to post
Share on other sites

Edit these:

function fish2Swim() {
document.getElementById("fish2").style.right =
horizontal[fish2Position] + "px";
++fish2Position;
if (fish2Position == 49)
fish2Position = 0;
}

<p><span id="fish2" style=
"position:absolute; right:10px; top:100px"><img 
src="fish2.gif" alt="Image of a fish"
/></span></p>

I changed left to right.

With my 1366px wide resoltion window, the left fishes only swim half way across before returning to the left, and the right fish swims in half the right side. If you want to merge them you will have to edit something else.

Edited by Wickham

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×