topical media & game development

talk show tell print

game-javascript-casual-crab-race.htm / htm



  
  <!-- THREE STEPS TO INSTALL CRAB RACE:
  
    1.  Copy the coding into the HEAD of your HTML document
    2.  Add the onLoad event handler into the BODY tag
    3.  Put the last coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Original:  Mike McGrath (mike_mcgrath@lineone.net) -->
  <!-- Web Site:  http://website.lineone.net/~mike_mcgrath -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- 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>
  </HEAD>
  
  <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  
  <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 = "game-javascript-casual-crab-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>
  
  <p><center>
  <font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  </center><p>
  
  <!-- Script Size:  10.80 KB -->
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.