topical media & game development

talk show tell print

game-javascript-casual-catch-a-spy-game.htm / htm



  
  <!-- FIVE STEPS TO INSTALL CATCH A SPY:
  
    1.  Copy the first section into a new file, save as spy.html -->
    2.  Copy the second section into a new file, save as world.html -->
    3.  Copy the third section into a new file, save as flight.html -->
    4.  Copy the fourth section into a new file, save as play.html -->
    5.  Upload game images and above files to web site directory -->
  
  <!-- STEP ONE: Copy the first section into a new file, save as spy.html  -->
  
  <HTML>
  <!-- Original:  Kien Caoxuan (kcaoxuan@caoxuan.com) -->
  <!-- Web Site:  http://www.caoxuan.com -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <frameset rows="260,*" border=0>
  <frame name="world" src=world.html>
  <frame name="play" src=play.html>
  </frameset>
  </HTML>
  
  <!-- STEP TWO: Copy the second section into a new file, save as world.html  -->
  
  <HTML>
  <script>
  N = (navigator.appName.indexOf("Netscape") != -1);
  M = (navigator.appName.indexOf("Microsoft") != -1);
  Vis = new Array();
  Vis[0] = (M) ? "hidden" : "hide";
  Vis[1] = (M) ? "visible" : "show";
  function Getdiv(divId,divY,divX,divW,divH,bCol,visb,zInd) {
  bkCol = (bCol != "")?((N)?" bgColor = "+bCol:";background:"+bCol):"";
  DivTyp = (M) ? "<DIV" : "<LAYER";
  if (M) {Styl = " ID = "+divId+" style = 'position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol+";visibility:"+Vis[visb]+";z-index:"+zInd+"'>"}
  if (N) {Styl = " ID = "+divId+" top = "+divY+" left = "+divX+" width = "+divW+" height = "+divH+bkCol+" visibility = "+Vis[visb]+" z-index = "+zInd+">"}
  document.writeln(DivTyp+Styl);
  }
  function EndDiv() {
  (M)? document.writeln("</DIV>"): document.writeln("</LAYER>");
  }
  Getdiv('worldmap',0,0,500,250,'',1,0);
  document.write("<img src = greyworld.jpg>");
  EndDiv();
  Getdiv('player',0,0,1,1,'',1,2);
  document.write("<img src = pol.gif width = 10>");
  EndDiv();
  Getdiv('Crim',0,0,1,1,'',1,2);
  document.write("<img src = ali.gif width = 10>");
  EndDiv();
  /*
  Getdiv('ads',220,10,300,30,'',1,2);
  document.write("<font face = Tahoma size = 2><a href = 'http://www.caoxuan.com/zip4free/request.html' target = _blank>Get Zip File</a>")
  EndDiv()
  */
  </script>
  <body bgcolor=silver>
  </body></HTML>
  
  <!-- STEP THREE: Copy the third section into a new file, save as flight.html  -->
  
  <HTML>
  <script>
  N = (navigator.appName.indexOf("Netscape") != -1);
  M = (navigator.appName.indexOf("Microsoft") != -1);
  Vis = new Array();
  Vis[0] = (M) ? "hidden" : "hide";
  Vis[1] = (M) ? "visible" : "show";
  function Getdiv(divId,divY,divX,divW,divH,bCol,visb,zInd) {
  bkCol = (bCol != "")?((N)?" bgColor = "+bCol:";background:"+bCol):"";
  DivTyp = (M) ? "<DIV" : "<LAYER";
  if (M) {Styl = " ID = "+divId+" style = 'position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol+";visibility:"+Vis[visb]+";z-index:"+zInd+"'>"}
  if (N) {Styl = " ID = "+divId+" top = "+divY+" left = "+divX+" width = "+divW+" height = "+divH+bkCol+" visibility = "+Vis[visb]+" z-index = "+zInd+">"}
  document.writeln(DivTyp+Styl);
  }
  function EndDiv() {
  (M)? document.writeln("</DIV>"): document.writeln("</LAYER>");
  }
  Getdiv('pol',0,0,100,100,'',1,0);
  document.write("<img src=pol.gif>");
  EndDiv();
  Getdiv('ali',120,550,100,100,'',1,1);
  document.write("<img src=ali.gif>");
  EndDiv();
  x = 0;
  function Moveit() {
  if (M) {document.all.pol.style.left = x;document.all.ali.style.left = 550-x}
  if (N) {document.layers.pol.left = x;document.layers.ali.left = 550-x}
  x += 5;
  if (x>550) {x = 0;self.close()}
  setTimeout('Moveit()',30);
  }
  function WinIt() {
  if (M) {document.all.pol.style.left = x;document.all.ali.style.left = 550-x}
  if (N) {document.layers.pol.left = x;document.layers.ali.left = 550-x}
  x += 5;
  if (x>300) Final()'
  setTimeout('WinIt()',30)'
  }
  function Final() {
  document.close();
  document.write("<center><font color=blue size=5>YOU GOT HIM!<br>after ");
  document.write(opener.document.forms[0].CurTime.value," hours...at ",opener.document.forms[0].Curplace.value," airport...<br>");
  document.write("<img src=gotcha.gif>");
  document.write("<form><input type=button value='NEXT MISSION' onclick = 'opener.location.reload();self.close()'></form></font></center>");
  }
  function Test() {
  (opener.document.forms[0].Curplace.value == opener.document.forms[0].Crimplace.value)?WinIt():Moveit();
  }
  </script>
  
  <body onload="Test()">
  <center>
  <font face="Tahoma" color=red size=5>
  <br><br><script>
  document.write("Welcome to ",opener.document.forms[0].Curplace.value," !")
  document.write("<br>Spy's on his way to ",opener.document.forms[0].Crimplace.value,".")
  </script>
  </font>
  </center>
  </body></HTML>
  
  <!-- STEP FOUR: Copy the fourth section into a new file, save as world.html  -->
  
  <HTML>
  <body>
  <form>
  <table border=1 cellpadding=3>
  <tr>
  <td align=right>
  Time: <input type=text size=5 name=CurTime value="0"> hrs<br> 
  You <img src=pol.gif width=10> in <input type=text size=15 name=Curplace><br>
  Spy <img src=ali.gif width=10> in <input type=text size=15 name=Crimplace>
<input type=button value="Hints" onclick="alert(Intro)"> </font></font> <td width=320> please click on your next flight... <br><input type=radio name=GoHere onclick="GetTo(0)"><input type=text size=15 name=Dest0> Duration <input type=text size=5 value=0 name=Time0> hrs <br><input type=radio name=GoHere onclick="GetTo(1)"><input type=text size=15 name=Dest1> Duration <input type=text size=5 value=0 name=Time1> hrs <br><input type=radio name=GoHere onclick="GetTo(2)"><input type=text size=15 name=Dest2> Duration <input type=text size=5 value=0 name=Time2> hrs <br><input type=radio name=GoHere onclick="GetTo(3)"><input type=text size=15 name=Dest3> Duration <input type=text size=5 value=0 name=Time3> hrs <br><input type=radio name=GoHere onclick="GetTo(4)"><input type=text size=15 name=Dest4> Duration <input type=text size=5 value=0 name=Time4> hrs <tr><td> <input type=button value="New Game" onclick="top.location.reload()"> <td align=right> <input type=button value="Decode" onclick="Decode()"> </table> </form> </body> <script> Intro = "Catch an International Spy\n\n"; Intro += "You are an Interpol officer who needs to track down the movement of the Green Spy.\n"; Intro += "He moves around the world in a predictable pattern.\n"; Intro += "Your job is to track him down...Learn his moves.\n"; Intro += "Once you're in the same airport with the Green Spy, you win!\n"; Intro += "Aim for the shortest time...\n"; Intro += "Good luck!\n\n"; Intro += "psst:\n"; Intro += " If you feel you're not getting very far...try the Decode Button...\n"; Intro += " It's a cheat...But in this world of espionage, who cares?\n"; N = (navigator.appName.indexOf("Netscape") != -1); M = (navigator.appName.indexOf("Microsoft") != -1); Destin = new Array("Sydney","New York","Frankfurt","paris","Moscow","peking","Tokyo","Capetown","Rio","Los Angeles","Saigon","New Dehli"); Xof = new Array(545,165,310,295,355,478,521,340,216,100,475,424); Yof = new Array(204,90,70,65,52,80,90,195,159,84,125,109); curTime = 0; theOne = 0; cm = 0; for (x = 0; x < 5; x++) { eval("document.forms[0].Dest"+x+".value = Destin["+x+"+1]"); } document.forms[0].Curplace.value = Destin[0]; Num = new Array(1,2,3,4,5,6,7,8,9,10,11); shuf = new Array(); x = 0; while (x < 11) { ran = Math.floor(Num.length*Math.random()); shuf[x] = Num[ran]; Fst = Num.slice(0,ran); Snd = Num.slice(ran+1); Num = Fst.concat(Snd); x++; } shuf[11] = Destin[0]; document.forms[0].Crimplace.value = Destin[shuf[0]]; if (M) { parent.world.document.all.player.style.left = Xof[0]; parent.world.document.all.player.style.top = Yof[0]; parent.world.document.all.Crim.style.left = Xof[shuf[0]]; parent.world.document.all.Crim.style.top = Yof[shuf[0]]; } if (N) { parent.world.document.layers.player.left = Xof[0]; parent.world.document.layers.player.top = Yof[0]; parent.world.document.layers.Crim.left = Xof[shuf[0]]; parent.world.document.layers.Crim.top = Yof[shuf[0]]; } function GetTo(d) { for (x = 0; x < Destin.length; x++) { if (Destin[x] == eval("document.forms[0].Dest"+d+".value")) theOne = x; } if (M) {parent.world.document.all.player.style.left = Xof[theOne];parent.world.document.all.player.style.top = Yof[theOne]} if (N) {parent.world.document.layers.player.left = Xof[theOne];parent.world.document.layers.player.top = Yof[theOne]} Destination = eval("document.forms[0].Dest"+d+".value"); t = eval("document.forms[0].Time"+d+".value"); if (isNaN(t)) t = 0; curTime+= parseInt(t); document.forms[0].Curplace.value = Destination; document.forms[0].CurTime.value = curTime; open('flight.html','flight','width=600,height=300,top=300,left=0,toolbar=no'); document.forms[0].GoHere[0].checked = false; chOne = Math.floor(Math.random()*12); while(chOne == theOne) {chOne = Math.floor(Math.random()*12)} document.forms[0].Dest0.value = Destin[chOne]; X1 = Xof[theOne]; Y1 = Yof[theOne]; X2 = Xof[chOne]; Y2 = Yof[chOne]; D = Math.floor(.1*Math.sqrt((X1-X2)*(X1-X2)+(Y1-Y2)*(Y1-Y2))); if (isNaN(D)) D = 0; document.forms[0].Time0.value = D; yx = theOne; for (v = 1;v<5;v++) { document.forms[0].GoHere[v].checked = false; yx++; if (yx>Destin.length-1)yx = 0; if (yx == chOne|yx == theOne)yx++; plc = Destin[yx]; eval("document.forms[0].Dest"+v+".value = plc"); X1 = Xof[theOne]; Y1 = Yof[theOne]; X2 = Xof[yx]; Y2 = Yof[yx]; D = Math.floor(.1*Math.sqrt((X1-X2)*(X1-X2)+(Y1-Y2)*(Y1-Y2))); if (isNaN(D)) D = 0; eval("document.forms[0].Time"+v+".value = D"); } cm++; if (cm>11) {cm = 0} if (M) {parent.world.document.all.Crim.style.left = Xof[shuf[cm]];parent.world.document.all.Crim.style.top = Yof[shuf[cm]]} if (N) {parent.world.document.layers.Crim.left = Xof[shuf[cm]];parent.world.document.layers.Crim.top = Yof[shuf[cm]]} document.forms[0].Crimplace.value = Destin[shuf[cm]]; } function Decode() { if (!confirm("Do you need special help?\nAre you really this hopeless?\n(Information like this is expensive!)"))return Deco = "List of scheduled flights:\n"; for (x = 0; x < 12; x++) { Deco+= Destin[shuf[x]]+" ("+shuf[x]+")\n"; } alert(Deco); } </script> </HTML> <!-- STEP FIVE: Upload game images and above files to web site directory --> <!-- You can download all the game images from: --> <!-- http://javascript.internet.com/img/catch-a-spy/catch-a-spy.zip --> <!-- Script Size: 9.65 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.