Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Crab Race
Places your bets on your favorite colored crab in a virtual crab race. Each crab has different odds and has different payouts. Good luck!
Insert into <BODY> of a Page Example Index.htm
<center> <form name="open-race"> <input type=button value="Play Crab Race" onClick="window.open('crab-race-example.htm','race','top=100,left=100,width=340,height=300');"> </form> </center>
Insert into <HEAD> of a Page crab-race-example.htm
<SCRIPT LANGUAGE="JavaScript"> <!-- Original: Mike McGrath (mike_mcgrath@lineone.net) --> <!-- Web Site: http://website.lineone.net/~mike_mcgrath --> <!-- Begin function browser_check() { var lecture = "Your browser does not support dynamic HTML \n" +"- this page cannot display in your browser."; var browser = (document.all || document.layers) ? true : alert(lecture); } // End --> </script>
Insert into <BODY> of a Page crab-race-example.htm
<BODY OnLoad="browser_check()"> <!-- STEP THREE: Copy this code into the BODY of your HTML document --> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // where you stored the crab image on your server var pic = "http://www.your-site.com/where/you/saved/it/crab.gif"; var mask = '<IMG SRC="' + pic + '">'; var fancy, stake, level, winner; var total = 10000; var running = 0; var stopped = 1; var odds = new Array(); var step = new Array(); var band='<TABLE BORDER=1 BORDERCOLOR=#000000 WIDTH=300 HEIGHT=160 ALIGN=CENTER CELLPADDING=0 CELLSPACING=0><FORM NAME="f"><TR>'; band += '<TD COLSPAN=4 BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT NAME="msg" SIZE=24 VALUE="" ></TD></TR><TR>'; band += '<TD BGCOLOR=#FF0000 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT NAME="box0" SIZE=3 VALUE="" onfocus="blur(this)"><BR><INPUT TYPE=RADIO NAME="back" VALUE="red" onclick="choose_fancy(this.form,this.value);"></TD>'; band += '<TD BGCOLOR=#00FF00 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT NAME="box1" SIZE=3 VALUE="" onfocus="blur(this)"><BR><INPUT TYPE=RADIO NAME="back" VALUE="green" onclick="choose_fancy(this.form,this.value);"></TD>'; band += '<TD BGCOLOR=#0000FF ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT NAME="box2" SIZE=3 VALUE="" onfocus="blur(this)"><BR><INPUT TYPE=RADIO NAME="back" VALUE="blue" onclick="choose_fancy(this.form,this.value);"></TD>'; band += '<TD BGCOLOR=#FFF000 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT NAME="box3" SIZE=3 VALUE="" onfocus="blur(this)"><BR><INPUT TYPE=RADIO NAME="back" VALUE="yellow" onclick="choose_fancy(this.form,this.value);"></TD></TR><TR>'; band += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON VALUE=" 1000 " onclick="choose_stake(this.form,this.value);"></TD>'; band += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON VALUE=" 2000 " onclick="choose_stake(this.form,this.value);"></TD>'; band += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON VALUE=" 3000 " onclick="choose_stake(this.form,this.value);"></TD>'; band += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON VALUE=" 4000 " onclick="choose_stake(this.form,this.value);"></TD></TR><TR>'; band += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON NAME="next" VALUE="Reset" onclick="init();"></TD>'; band += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT NAME="wlt" TYPE=TEXT SIZE=5 VALUE='+total+' onfocus="blur(this)"></TD>'; band += '<TD COLSPAN=2 BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON NAME="go" VALUE=" Start Race " onclick="lets_go(this.form);"></TD></TR></FORM></TABLE>'; if(document.all) { var content=('<DIV ID="trak" STYLE="position:absolute; top: 20; left:20; width:300; height:100; background:#000000;"></DIV>'); content += ('<DIV ID="line" STYLE="position:absolute; top: 20; left:287;width: 1; height:100; background:#FFFFFF;"></DIV>'); content += ('<DIV ID="book" STYLE="position:absolute; top:120; left:20; width:300; height:160; background:#C0C0C0;">'+band+'</DIV>'); content += ('<DIV ID="redc" STYLE="position:absolute; top: 23; left:20; width: 31; height: 22; background:#FF0000;">'+mask+'</DIV>'); content += ('<DIV ID="grnc" STYLE="position:absolute; top: 47; left:20; width: 31; height: 22; background:#00FF00;">'+mask+'</DIV>'); content += ('<DIV ID="bluc" STYLE="position:absolute; top: 71; left:20; width: 31; height: 22; background:#0000FF;">'+mask+'</DIV>'); content += ('<DIV ID="yelc" STYLE="position:absolute; top: 96; left:20; width: 31; height: 22; background:#FFF000;">'+mask+'</DIV>'); } else if (document.layers) { var content=('<LAYER ID="trak" top=" 20" left="20" width="300" height="100" bgColor="#000000"></LAYER>'); content += ('<LAYER ID="line" top=" 20" left="287" width="1" height="100" bgColor="#FFFFFF"></LAYER>'); content += ('<LAYER ID="book" top="120" left="20" width="300" height="160" bgColor="#C0C0C0">'+band+'</LAYER>'); content += ('<LAYER ID="redc" top=" 23" left="20" width=" 31" height=" 22" bgColor="#FF0000">'+mask+'</LAYER>'); content += ('<LAYER ID="grnc" top=" 47" left="20" width=" 31" height=" 22" bgColor="#00FF00">'+mask+'</LAYER>'); content += ('<LAYER ID="bluc" top=" 71" left="20" width=" 31" height=" 22" bgColor="#0000FF">'+mask+'</LAYER>'); content += ('<LAYER ID="yelc" top=" 96" left="20" width=" 31" height=" 22" bgColor="#FFF000">'+mask+'</LAYER>'); } document.write(content); init(); function init() { if(!running) { fancy=""; stake=""; level=""; stopped = 0; for(i=0; i<4; i++) { odds[i] = Math.round(Math.random() * 3)+1; step[i] = eval(10 - odds[i]); odds[i] +="/1"; } if(document.all) { document.all.msg.value = "Place your bet ..." document.all.box0.value = odds[0]; document.all.box1.value = odds[1]; document.all.box2.value = odds[2]; document.all.box3.value = odds[3]; for(i=0; i<4; i++) { document.all.back[i].checked=0; } document.all.redc.style.left=20; document.all.grnc.style.left=20; document.all.bluc.style.left=20; document.all.yelc.style.left=20; } if(document.layers) { with(document.book) { document.f.msg.value = "Place your bet ..." document.f.box0.value = odds[0]; document.f.box1.value = odds[1]; document.f.box2.value = odds[2]; document.f.box3.value = odds[3]; for(i=0; i<4; i++) { document.f.back[i].checked=0; } } document.redc.left = 20; document.grnc.left = 20; document.bluc.left = 20; document.yelc.left = 20; } } } function choose_fancy(f,color) { if(!running) { switch(color) { case "red" : level=odds[0]; break; case "green" : level=odds[1]; break; case "blue" : level=odds[2]; break; case "yellow" : level=odds[3]; break; } fancy = color; if(stake != "") f.msg.value="Bet: "+fancy+" "+stake+" ("+level+")"; else f.msg.value= "Selected "+fancy; } } function choose_stake(f,amount) { if(!running) { stake = amount; if(fancy != "") f.msg.value="Bet: "+fancy+" "+stake+" ("+level+")"; else f.msg.value = "Stake "+stake; } } function lets_go(f) { if(!running && stopped) init(); if(!running && !stopped) { if(stake > parseInt(f.wlt.value)) f.msg.value="Cannot bet this amount!"; else if(fancy == "") f.msg.value="Select a color"; else if(stake == "") f.msg.value="Click a bet amount"; else { running = 1; run_race(); } } } function run_race() { var n = Math.floor(Math.random() * 4); if(document.all) { switch(n) { case 0 : document.all.redc.style.left = parseInt(document.all.redc.style.left)+step[0]; if(parseInt(document.all.redc.style.left) >= 288) { document.all.redc.style.left = 288; winner = "red"; running = 0; stopped = 1; } break; case 1 : document.all.grnc.style.left = parseInt(document.all.grnc.style.left)+step[1]; if(parseInt(document.all.grnc.style.left) >= 288) { document.all.grnc.style.left = 288; winner = "green"; running = 0; stopped = 1; } break; case 2 : document.all.bluc.style.left = parseInt(document.all.bluc.style.left)+step[2]; if(parseInt(document.all.bluc.style.left) >= 288) { document.all.bluc.style.left = 288; winner = "blue"; running = 0; stopped = 1; } break; case 3 : document.all.yelc.style.left = parseInt(document.all.yelc.style.left)+step[3]; if(parseInt(document.all.yelc.style.left) >= 288) { document.all.yelc.style.left = 288; winner = "yellow"; running = 0; stopped = 1; } break; } } if(document.layers) { switch(n) { case 0 : document.redc.left += step[0]; if(document.redc.left >= 288) { document.redc.left = 288; winner = "red"; running = 0; stopped = 1; } break; case 1 : document.grnc.left += step[1]; if(document.grnc.left >= 288) { document.grnc.left = 288; winner = "green"; running = 0; stopped = 1; } break; case 2 : document.bluc.left += step[2]; if(document.bluc.left >= 288) { document.bluc.left = 288; winner = "blue"; running = 0; stopped = 1; } break; case 3 : document.yelc.left += step[3]; if(document.yelc.left >= 288) { document.yelc.left = 288; winner = "yellow"; running = 0; stopped = 1; } break; } } if(running) window.setTimeout("run_race()", 100); else results(); } function results() { if(document.all) { if(winner == fancy) { var winnings = parseInt(stake) * parseInt(level.charAt(0)); document.f.msg.value = winner+" wins: win "+winnings; total += winnings; document.f.wlt.value = total; } else { document.f.msg.value = winner+" wins: lose "+stake; total -= parseInt(stake); document.f.wlt.value = total; } if(parseInt(document.f.wlt.value) == 0) var refill = confirm("You're Broke! - Play Again? "); if(refill) { total = 10000; document.f.wlt.value = total; init(); } } if(document.layers) { with(document.book) { if(winner == fancy) { var winnings = parseInt(stake) * parseInt(level.charAt(0)); document.f.msg.value = winner+" wins: win "+winnings; total += winnings; document.f.wlt.value = total; } else { document.f.msg.value = winner+" wins: lose"+stake; total -= parseInt(stake); document.f.wlt.value = total; } if(parseInt(document.f.wlt.value) == 0) var refill = confirm("You're Broke! - Play Again? "); if(refill) { total = 10000; document.f.wlt.value = total; init(); } } } } // End --> </script>
