topical media & game development
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.