« »

You can set the initial position, velocity and acceleration of both fish by filling in the corresponding boxes. Initial values are set to zero. The overall range of motion of the fish is 500 units starting at zero. Choose your initial values while keeping the range in mind. For example, an initial position of zero combined with an initial negative velocity will send the fish backwards out of range and the race stops. The position and velocity are calculated for every unit of time assuming constant acceleration motion. When exceeding the 500 units, a winner is declared and the fish are repositioned at their starting position. You can view the magnitude and direction of the velocity of each of the fish by clicking on the button.

Label: Fish Race

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE>.poisson {
	VISIBILITY: hidden; POSITION: absolute
}
.instructions {
	VISIBILITY: hidden; WIDTH: 400px; COLOR: #ffcc33; POSITION: absolute
}
.tie {
	VISIBILITY: hidden; WIDTH: 150px; COLOR: #ff0000; POSITION: absolute
}
.redWin {
	VISIBILITY: hidden; WIDTH: 150px; COLOR: #ff0000; POSITION: absolute
}
.blueWin {
	VISIBILITY: hidden; WIDTH: 150px; COLOR: #0000ff; POSITION: absolute
}
.table1 {
	FONT-SIZE: 9.5pt; COLOR: #000080; FONT-FAMILY: Arial, helvetica, sans-serif; BACKGROUND-COLOR: #ffffaf; TEXT-ALIGN: left; TEXT-DECORATION: none
}
.table2 {
	FONT-FAMILY: Arial, helvetica, sans-serif; BACKGROUND-COLOR: #ff0000; TEXT-ALIGN: left; TEXT-DECORATION: none
}
.table3 {
	FONT-FAMILY: Arial, helvetica, sans-serif; BACKGROUND-COLOR: #0000ff; TEXT-ALIGN: left; TEXT-DECORATION: none
}
.table4 {
	COLOR: #000000; FONT-FAMILY: Arial, helvetica, sans-serif; BACKGROUND-COLOR: #ffffaf; TEXT-ALIGN: left; TEXT-DECORATION: none
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT>
//*************************
//Copyright Taha Mzoughi, September 1997, modified on July 2000
//Otherwise, you can contact me at (mzoughi@ra.msstate.edu)
//*************************
var timeinterval = 1000;
var ifish1width = 144;
var ifish2width = 144;
var timeinterval2 = 1000;
var iniposition1=0;
var inivel1=0;
var accel1=0;
var vel1=0;
var iniposition2=0;
var inivel2=0;
var accel2=0;
var vel2=0;
fishimage1 = new Image();
line1 = new Image();
line2 = new Image();
fishimage1.src="fish1.gif";
fishimage2 = new Image();
fishimage2.src="fish2.gif";
var step1=0;
var step2=0;
var time=0;
var initialspeed1=50;
var fish;
var fish2;
var speed1;
var speed2;
var instructions;
var blueWin;
var redWin;
var waiting;
var formlayer;
var tie;
var tie0;
var isNS;

if (document.layers) { (isNS=true) }
var HIDDEN = (isNS) ? 'hide' : 'hidden';
var VISIBLE = (isNS) ? 'show' : 'visible';
//**********************
function showForm() {
if(isNS){
	fish = document.fish;
	fish2 = document.fish2;
	speed1 = document.speed1;
	speed2 = document.speed2;
	fish2.top = 220
	fish2.left = 0
	fish.top = 170
	fish.left = 0
	speed1.top = 300
	speed1.left = 0
	speed2.top = 330
	speed2.left = 0
	document.tie.top = 170
	document.tie.left = 600
	document.tie0.top = 170
	document.tie0.left = 600
	document.waiting.top = 300
	document.waiting.left = 50
	document.instructions.top = 170
	document.instructions.left = 180
	document.redWin.top = 170
	document.redWin.left = 600
	document.blueWin.top = 170
	document.blueWin.left = 600
	document.blueWin.visibility=HIDDEN
	document.redWin.visibility=HIDDEN
	document.fish.visibility=VISIBLE
	document.fish2.visibility=VISIBLE
	document.waiting.visibility=HIDDEN
	document.instructions.visibility=HIDDEN
	document.formlayer.visibility=VISIBLE
	document.speed1.visibility=HIDDEN
	document.speed2.visibility=HIDDEN
	document.tie.visibility=HIDDEN
	document.tie0.visibility=HIDDEN
	//return false;
}
else{
	waiting = document.all.waiting.style;
	instructions = document.all.instructions.style;
	blueWin = document.all.blueWin.style;
	redWin = document.all.redWin.style;
	formlayer = document.all.formlayer.style;
	fish = document.all.fish.style;
	fish2 = document.all.fish2.style;
	speed1 = document.all.speed1.style;
	speed2 = document.all.speed2.style;
	tie = document.all.tie.style;
	tie0 = document.all.tie0.style;
	fish2.posTop = 220
	fish2.posLeft = 0
	fish.posTop = 170
	fish.posLeft = 0
	speed1.posTop = 300
	speed1.posLeft = 0
	speed2.posTop = 330
	speed2.posLeft = 0
	waiting.posTop = 300
	waiting.posLeft = 50
	instructions.posTop = 170
	instructions.posLeft = 180
	redWin.posTop = 170
	redWin.posLeft = 600
	blueWin.posTop = 170
	blueWin.posLeft = 600
	tie.posTop = 170
	tie.posLeft = 600
	tie0.posTop = 170
	tie0.posLeft = 600
	tie.visibility=HIDDEN
	tie0.visibility=HIDDEN
	blueWin.visibility=HIDDEN
	redWin.visibility=HIDDEN
	fish.visibility=VISIBLE
	fish2.visibility=VISIBLE
	waiting.visibility=HIDDEN
	instructions.visibility=HIDDEN
	formlayer.visibility=VISIBLE
	speed1.visibility=HIDDEN
	speed2.visibility=HIDDEN
	//alert(fish.visibility);
	return true;
}
}
//**********************
//Stop Race
//**********************
function stopRace(){
initializeParam();
if(isNS){
	document.redWin.visibility=HIDDEN;
	document.blueWin.visibility=HIDDEN;
	document.tie.visibility=HIDDEN;
	document.tie0.visibility=HIDDEN;
}
else{
redWin.visibility=HIDDEN;
blueWin.visibility=HIDDEN;
tie.visibility=HIDDEN;
tie0.visibility=HIDDEN;
}
}	
//**********************
//Show tie
//**********************
function showtie(){
if(isNS){
	if(iniposition1==0 && inivel1==0 && accel1==0){document.tie0.visibility=VISIBLE;return false;}
	else{document.tie.visibility=VISIBLE;return true;}
	
}
else{
if(iniposition1==0 && inivel1==0 && accel1==0){tie0.visibility=VISIBLE;}
else{tie.visibility=VISIBLE;}
return false;
}
}	


//**********************
//Initialize Parameters
//**********************
function initializeParam(){
if(isNS){
	document.fish.left=10;
	document.fish2.left=10;
	document.speed1.left=10;
	document.speed2.left=10;
	iniposition1=0;
	inivel1=0;
	accel1=0;
	iniposition2=0;
	inivel2=0;
	accel2=0;
	step1=0;
	step2=0;
	time=0;
	ifish1width=144;
	return false;
}
else{
	fish.posLeft=10;
	fish2.posLeft=10;
	speed1.posLeft=10;
	speed2.posLeft=10;
	iniposition1=0;
	inivel1=0;
	accel1=0;
	iniposition2=0;
	inivel2=0;
	accel2=0;
	step1=0;
	step2=0;
	time=0;
	ifish1width=144;
	return false;
}
}


//**********************
//Show or hide Instructions
//**********************
function showInst(){
if(isNS){
	document.tie.visibility=HIDDEN;
	document.tie0.visibility=HIDDEN;
	document.redWin.visibility=HIDDEN;
	document.blueWin.visibility=HIDDEN;
	//alert(document.speed1.visibility);
	if(document.instructions.visibility==HIDDEN){
		document.fish.visibility=HIDDEN;
		document.fish2.visibility=HIDDEN;
		document.speed1.visibility=HIDDEN;
		document.speed2.visibility=HIDDEN;
		document.instructions.visibility=VISIBLE;
	}
	else{
	document.fish.visibility=VISIBLE;
	document.fish2.visibility=VISIBLE;
	document.instructions.visibility=HIDDEN;
	}
	return true;
}
else{
tie.visibility=HIDDEN;
tie0.visibility=HIDDEN;
redWin.visibility=HIDDEN;
blueWin.visibility=HIDDEN;
//	alert(formlayer.visibility);
//alert(fish2.visibility);
//	alert(fish.posLeft);
if(instructions.visibility=='hidden'){
	fish.visibility=HIDDEN;
	fish2.visibility=HIDDEN;
	speed1.visibility=HIDDEN;
	speed2.visibility=HIDDEN;
	instructions.visibility=VISIBLE;
}
else{
fish.visibility=VISIBLE;
fish2.visibility=VISIBLE;
instructions.visibility=HIDDEN;
}
return true;

}
}
//**********************
//Show or hide velocity layers
//**********************
function showVel(){
if(isNS){
//alert(document.speed1.visibility);
	if(document.speed1.visibility==VISIBLE){
		document.speed1.visibility=HIDDEN;
		document.speed2.visibility=HIDDEN;
	//alert(document.speed1.visibility);
	}
	else{
	document.speed1.visibility=VISIBLE;
	document.speed2.visibility=VISIBLE;}
	return true;
}
else{
	if(speed1.visibility==VISIBLE){
		speed1.visibility=HIDDEN;
		speed2.visibility=HIDDEN;
	}
	else{
	speed1.visibility=VISIBLE;
	speed2.visibility=VISIBLE;}
	return true;

}
}

<!-- Simple move function -->
function movefish2() {alert(fish.posLeft);
}
function movefish(){
//alert(fish.posLeft);
if (document.all) {
	//var formlayer = document.formlayer;
	tie.visibility=HIDDEN;
	tie0.visibility=HIDDEN;
	redWin.visibility=HIDDEN;
	blueWin.visibility=HIDDEN;
	iniposition1=parseFloat(document.forms[0].iniposition1.value);
	inivel1=parseFloat(document.forms[0].inivel1.value);
	accel1=parseFloat(document.forms[0].accel1.value);
	iniposition2=parseFloat(document.forms[0].iniposition2.value);
	inivel2=parseFloat(document.forms[0].inivel2.value);
	accel2=parseFloat(document.forms[0].accel2.value);
	if(iniposition1==0 && inivel1==0 && accel1==0){showtie();return true;}
	timeinterval=1;
	step1=iniposition1+inivel1*time+accel1*time*time*0.5;
	initialspeed1+=accel1*time;
	vel1=inivel1+time*accel1;
	ifish1width =Math.abs(vel1);
	step2=iniposition2+inivel2*time+accel2*time*time*0.5;
	vel2 =inivel2+time*accel2;
	ifish2width =Math.abs(vel2);
	time+=timeinterval;
	//var fish = document.all.fish;
	//var fish2 = document.all.fish2;
	//var speed1 = document.all.speed1;
	//var speed2 = document.all.speed2;
	//alert(fish.posLeft);
	if ((fish.posLeft < 500 && fish2.posLeft< 500)&&(fish.posLeft >= 0 && fish2.posLeft >= 0)) {
	//alert(fish.posLeft);
		fish.posLeft=Math.round(step1);
		fish2.posLeft=Math.round(step2);
		speed1.posLeft=Math.round(step1);
		changeVel1();
		speed2.posLeft=Math.round(step2);
		changeVel2();
	}
	else {
	if(iniposition1==iniposition2 && inivel1==inivel2 && accel1==accel2){showtie();}
	else if(fish.posLeft < fish2.posLeft){redWin.visibility=VISIBLE}
	else{blueWin.visibility=VISIBLE}
	initializeParam();
	return;
	}
	//alert(speed);
	setTimeout("movefish()", timeinterval);
	return;
}
if(document.layers){
	var formlayer = document.formlayer;
	document.tie.visibility=HIDDEN;
	document.tie0.visibility=HIDDEN;
	document.redWin.visibility=HIDDEN;
	document.blueWin.visibility=HIDDEN;
	iniposition1=parseFloat(formlayer.document.forms[0].iniposition1.value);
	inivel1=parseFloat(formlayer.document.forms[0].inivel1.value);
	accel1=parseFloat(formlayer.document.forms[0].accel1.value);
	iniposition2=parseFloat(formlayer.document.forms[0].iniposition2.value);
	inivel2=parseFloat(formlayer.document.forms[0].inivel2.value);
	accel2=parseFloat(formlayer.document.forms[0].accel2.value);
	if(iniposition1==0 && inivel1==0 && accel1==0){showtie();return true;}
	timeinterval=2;
	step1=iniposition1+inivel1*time+accel1*time*time*0.5;
	initialspeed1+=accel1*time;
	vel1=inivel1+time*accel1;
	ifish1width =Math.abs(vel1);
	step2=iniposition2+inivel2*time+accel2*time*time*0.5;
	vel2 =inivel2+time*accel2;
	ifish2width =Math.abs(vel2);
	time+=timeinterval;
	fish = document.fish;
	fish2 = document.fish2;
	speed1 = document.speed1;
	speed2 = document.speed2;
	if ((fish.left < 500 && fish2.left < 500)&&(fish.left >= 0 && fish2.left >= 0)) {
		fish.left=Math.round(step1);
		fish2.left=Math.round(step2);
		speed1.left=Math.round(step1);
		changeVel1()
		speed2.left=Math.round(step2);
		changeVel2()
	}
	else {
	if(iniposition1==iniposition2 && inivel1==inivel2 && accel1==accel2){showtie();}
	else if(fish.left < fish2.left){document.redWin.visibility=VISIBLE}
	else{document.blueWin.visibility=VISIBLE}
	initializeParam();
	return;
	}
	//alert(speed);
	setTimeout("movefish()", timeinterval);
	return;
}
}

//*************************
//Rewrite speed1 layer with the new image size and new position
//*************************

function changeVel1() {
var toWrite="";
if(isNS){
	if(vel1 < 0){toWrite+="<IMG name=arrow1 SRC=bluearrow.gif height=9 hspace=0 align=absmiddle>";}
	toWrite +="<IMG name=line1 SRC=blue.gif hspace=0 vspace=2 height=4 align=middle width="+ifish1width+">";
	if(vel1 >=0){toWrite+="<IMG name=arrow1 SRC=bluearrowr.gif height=9 hspace=0 align=absmiddle>";}
	document.speed1.document.write(toWrite);
	document.speed1.document.close();
}
else{
//alert(ifish1width+"\n"+ifish2width);
//speed1.visibility=HIDDEN;
line1.width=ifish1width;
//speed1.visibility=VISIBLE;
clipTop=0
clipLeft=144-ifish1width
clipRight=clipLeft+ifish1width+5;
clipBottom=30
//alert(clipLeft+"\n"+clipRight);
	clipspeed1 ="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
	speed1.clip=clipspeed1

//	if(vel1 < 0){toWrite+="<DIV ID=speed1 CLASS =poisson><IMG name=arrow1 SRC=bluearrow.gif height=9 hspace=0 align=absmiddle>";}
//	toWrite +="<IMG name=line1 SRC=blue.gif hspace=0 vspace=2 height=4 align=middle width="+ifish1width+">";
//	if(vel1 >=0){toWrite+="<IMG name=arrow1 SRC=bluearrowr.gif height=9 hspace=0 align=absmiddle></div>";}
//	document.write(toWrite);
	//document.all.speed1.close();

}
}
//*************************
//Rewrite speed2 layer with the new image size and new position
//*************************

function changeVel2() {
var toWrite="";
if(isNS){
if(vel2 < 0){toWrite+="<IMG name=arrow1 SRC=redarrow.gif height=9 hspace=0 align=absmiddle>";}
toWrite +="<IMG name=line1 SRC=red.gif hspace=0 vspace=2 height=4 align=middle width="+ifish2width+">";
if(vel2 >=0){toWrite+="<IMG name=arrow1 SRC=redarrowr.gif height=9 hspace=0 align=absmiddle>";}
document.speed2.document.write(toWrite);
document.speed2.document.close();
}
else{
line2.width=ifish2width;
clipTop=0
clipLeft=144-ifish2width
clipRight=clipLeft+ifish2width+5;
clipBottom=30
	clipspeed2 ="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
	speed2.clip=clipspeed2
}
}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onload="showForm();return true;">
<SCRIPT>
	var toWrite="\n<DIV ID=speed2 CLASS=poisson><IMG name=line2 SRC=red.gif hspace=0 vspace=2 height=4 align=middle width="+ifish2width+">";
	toWrite +="<iMG name=arrow2 SRC=redarrowr.gif height=9 hspace=0 align=absmiddle></div>";
	toWrite +="\n<DIV ID=speed1 CLASS =poisson><IMG name=line1 SRC=blue.gif hspace=0 vspace=2 height=4 align=middle width="+ifish1width+">";
	toWrite +="<IMG name=arrow1 SRC=bluearrowr.gif height=9 hspace=0 align=absmiddle></div>";
	document.write(toWrite);
</SCRIPT>

<DIV class=poisson id=fish><IMG height=73 src="fish1.gif" 
width=144 align=absMiddle name=ifish1></DIV>
<DIV class=poisson id=fish2><IMG src="fish2.gif" width=144 
name=ifish2></DIV>
<DIV class=poisson id=waiting>
<H3>Please wait while the fish loads...</H3></DIV>
<DIV class=redWin id=redWin>

<TABLE width=150>
  <TBODY>
  <TR>
    <TD class=table2 id=table2>
      <CENTER>
      <H1><FONT color=#33ff33>Red Wins</FONT></H1></CENTER></TD></TR></TBODY></TABLE></DIV>
<DIV class=blueWin id=blueWin>
<TABLE width=150>
  <TBODY>
  <TR>

    <TD class=table3 id=table3>
      <CENTER>
      <H1><FONT color=#ffff00>Blue Wins</FONT></H1></CENTER></TD></TR></TBODY></TABLE></DIV>
<DIV class=tie id=tie>
<TABLE width=150>
  <TBODY>
  <TR>
    <TD class=table4 id=table4>
      <CENTER>

      <H1>It is a tie!!!</H1></CENTER></TD></TR></TBODY></TABLE></DIV>
<DIV class=tie id=tie0>
<TABLE width=150>
  <TBODY>
  <TR>
    <TD class=table4 id=table4>
      <CENTER>
      <H2>You need to input parameters!</H2></CENTER></TD></TR></TBODY></TABLE></DIV>
<DIV class=instructions id=instructions>

<TABLE width=400>
  <TBODY>
  <TR>
    <TD class=table1 id=table1><B><FONT color=#990000 
      size=+1>Instructions:</FONT></B> 
      <BLOCKQUOTE>You can set the initial position, velocity and acceleration of 
		both fish by filling in the corresponding boxes. Initial values are set 
		to zero. The overall range of motion of the fish is 500 units starting 
		at zero. Choose your initial values while keeping the range in mind. For 
		example, an initial position of zero combined with an initial negative 
		velocity will send the fish backwards out of range and the race stops. 
		The position and velocity are calculated for every unit of time assuming 
		constant acceleration motion. When exceeding the 500 units, a winner is 
		declared and the fish are repositioned at their starting position. You 
		can view the magnitude and direction of the velocity of each of the fish 
		by clicking on the button. 
</BLOCKQUOTE></TD></TR></TBODY></TABLE></DIV>
<DIV class=poisson id=formlayer>
<BLOCKQUOTE>
  <FORM>
  <CENTER>
  <TABLE border=0>

    <TBODY>
    <TR>
      <TD><FONT color=#0000ff>Blue Fish</FONT></TD>
      <TD></TD>
      <TD><FONT color=#0000ff>
        <P align=right>Initial Position (1-350): </FONT></P></TD>
      <TD><INPUT size=3 value=0 name=iniposition1></TD>
      <TD><FONT color=#0000ff>

        <P align=right>Initial Velocity: </FONT></P></TD>
      <TD><INPUT size=2 value=0 name=inivel1></TD>
      <TD><FONT color=#0000ff>
        <P align=right>Acceleration: </FONT></P></TD>
      <TD><INPUT size=2 value=0 name=accel1></TD></TR>
    <TR>
      <TD><FONT color=#ff0000>Red Fish</FONT></TD>

      <TD></TD>
      <TD><FONT color=#ff0000>
        <P align=right>Initial Position (1-350): </FONT></P></TD>
      <TD><INPUT size=3 value=0 name=iniposition2></TD>
      <TD><FONT color=#ff0000>
        <P align=right>Initial Velocity: </FONT></P></TD>
      <TD><INPUT size=2 value=0 name=inivel2></TD>
      <TD><FONT color=#ff0000>

        <P align=right>Acceleration: </FONT></P></TD>
      <TD><INPUT size=2 value=0 name=accel2></TD></TR>
    <TR>
      <TD colSpan=7>
        <CENTER><INPUT onclick="movefish(); return false;" type=button value="Start Race"> 
<INPUT onclick="showVel(); return false;" type=button value="Show/Hide velocity"> 
<INPUT onclick="showInst(); return false;" type=button value="Show/Hide Instructions"> 
<!INPUT type=button value="Stop Race" OnClick="stopRace();"></CENTER></TD></TR></TBODY></TABLE></CENTER></FORM></BLOCKQUOTE></DIV>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!

javascriptbank.com javascripton.com gomy.mobi gomymobi.com ApexBTC.com ABP3.com this.bid Card.rip CryptoKD.com XMQV.com choose.exchange ChainTutor.com CTRCoin.com ZWVQ.com ChatTotal.com system.money pornID.net CreditCard.rip YeuNu.com CoinHolo.com eChainBank.com choose.works war.money index.services

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Taha Mzoughi [more]
2,492
0
0
0
18.57 KBytes

JavaScript Fish Race - JID: 672 - Language: English

0/5 0 votes / 2,492 previews / 0 comment 30/01/2007 You can set the initial position, velocity and acceleration of both fish by filling in the corresponding boxes. Initial ...JavaScript Fish Race - JID: 672 - Fish Race - Language: English

yeusinhly[5]

Let's be first member to do this