Full version: jsB@nk » Game » Fish Race
URL: https://www.javascriptbank.com/fish-race-index.html
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.
Full version: jsB@nk » Game » Fish Race
URL: https://www.javascriptbank.com/fish-race-index.html
<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--><SCRIPT>//*************************//Copyright Taha Mzoughi, September 1997, modified on July 2000//Otherwise, you can contact me at ([email protected])//*************************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 = 220fish2.left = 0fish.top = 170fish.left = 0speed1.top = 300speed1.left = 0speed2.top = 330speed2.left = 0document.tie.top = 170document.tie.left = 600document.tie0.top = 170document.tie0.left = 600document.waiting.top = 300document.waiting.left = 50document.instructions.top = 170document.instructions.left = 180document.redWin.top = 170document.redWin.left = 600document.blueWin.top = 170document.blueWin.left = 600document.blueWin.visibility=HIDDENdocument.redWin.visibility=HIDDENdocument.fish.visibility=VISIBLEdocument.fish2.visibility=VISIBLEdocument.waiting.visibility=HIDDENdocument.instructions.visibility=HIDDENdocument.formlayer.visibility=VISIBLEdocument.speed1.visibility=HIDDENdocument.speed2.visibility=HIDDENdocument.tie.visibility=HIDDENdocument.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 = 220fish2.posLeft = 0fish.posTop = 170fish.posLeft = 0speed1.posTop = 300speed1.posLeft = 0speed2.posTop = 330speed2.posLeft = 0waiting.posTop = 300waiting.posLeft = 50instructions.posTop = 170instructions.posLeft = 180redWin.posTop = 170redWin.posLeft = 600blueWin.posTop = 170blueWin.posLeft = 600tie.posTop = 170tie.posLeft = 600tie0.posTop = 170tie0.posLeft = 600tie.visibility=HIDDENtie0.visibility=HIDDENblueWin.visibility=HIDDENredWin.visibility=HIDDENfish.visibility=VISIBLEfish2.visibility=VISIBLEwaiting.visibility=HIDDENinstructions.visibility=HIDDENformlayer.visibility=VISIBLEspeed1.visibility=HIDDENspeed2.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=0clipLeft=144-ifish1widthclipRight=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=0clipLeft=144-ifish2widthclipRight=clipLeft+ifish2width+5;clipBottom=30clipspeed2 ="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--><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-->
http://javascriptbank.com/javascript/game/Fish_Race/fish1.gifhttp://javascriptbank.com/javascript/game/Fish_Race/fish2.gif