Learning Javascript using the game VIRUS

VIRUS GAME

 
Making your own games
The aim of this document is to enable you to learn how the game works so you can make your own games. Don't worry; you don't need to know all the programming details to start off with. Virus - game screen
 
The game VIRUS uses Javascript and standard HTML.
 
The game simulates the movement of a virus in a PC network. The task a of a player is to drop on (feed) the computers   and get away from an antivirus .
 
When the Virus eats up the computer, his body is extended and the difficulty of the game is growing. The Virus can not crash into the borders of playing area. Movement of the virus is realized by keyboard arrows.  The button New Game enables to start the new game and to set up the speed of Virus movement.  The player can continuously control the number of eated computers in time and the length of Virus.
 
When the game finishes, the player can see the total number of eated computers and time of the game.
 
When the game finishes, the player can see the total number of eated computers and time of the game.
 
Teachers Guide
Button Teachers Guide opens the new window with the brief description of the game and the relation to the INGOT.
 

Game Download
 
The game can be copied and modified according to your own skills:
Right clicking the mouse will bring up a menu. The "View Source" item on the menu must be selected (the text of the menu can differ slightly according to the browser used; the text "View Source" refers to the Internet Explorer browser and the "View Page Source" is used by the Mozilla Firefox browser).
Mark the text using standard Windows OS commands (e.g. CTRL+A) and copy it into the clipboard (e.g. CTRL+C). Open any text editor capable of processing plain text (e.g. Notepad, which is part of Windows OS) and paste the text into the editor from the clipboard (e.g. CTRL+V).
Save the text displayed in the word editor as a file of any name and use either "html" or "htm" extension, which is the standard for the files to be opened in any internet browser.
Images are another essential part of the game and the list of images used is as follows:
wormy_a.gif, wormy_b.gif – pictures of a computer and an antivirus
wormy_bg.gif – background image
wormy_e.gif – end of the virus after the collision with the antivirus
wormy_hb.gif, wormy_hl.gif, wormy_hr.gif, wormy_ht.gif – the virus heads (rotation according to the movement direction)
wormy_m.gif – the virus body
wormy_tb.gif, wormy_tl.gif, wormy_tr.gif, wormy_tt.gif – the virus tails (rotation according to the movement direction)
 
The images can be downloaded via changing the address in the browser bar:   „worm.htm“  is replaced with for example „l0.gif“ .
After pressing "Enter" on the keyboard, a dialog box will prompt you to save a file. The file must be saved under the same name and extension and into the same directory containing the previous file. The image must be saved in the subdirectory named "images", which must be created beforehand.
Correct function of all downloaded components of the game can be verified by launching the worm.htm file.
 
Replacing images
The game images can be replaced with your own ones. The game background can be modified under the following conditions:.
-          the image files must have an identical name and extension
(more experienced programmers can use a different type of the image file, provided they modify its source code accordingly as described below.)
-          the game background is only a template, which consists of its repeated parts
-          the game background must be transparent (description of this feature is outside of the scope of this manual and can be found on the web)
-          the images must have an identical length and width measured in pixels (description of this feature is outside of the scope of this manual and can be found on the web)
 

Using Different Image File Formats
-          All expressions "gif" present in the code must be replaced with your own ones.The expression "gif" is the file extension of the image files used. The image file format can be replaced by extensions "png" or "jpg" (except for the background, which must be transparent – description of this feature is outside of the scope of this manual and can be found on the web)

Brief Description of the Game Functions in JavaScript Language

As mentioned earlier, the game is written using JavaScript and HTML commands. Brief help descriptions for functions and elements, and descriptions of variables are stated directly in the code (in the comment lines). In order to understand the function, basic knowledge of JavaScript and HTML programming is necessary.
The following codes are in the beginning of each file (for browser detection and correct display of the layers):
 
 
<script for=document event="onkeydown()" language="JScript">
//testing keys
if (window.event) KeyDown(window.event.keyCode);
</script>
<script language="JavaScript">
//testing type of browser
var IsNetscape = false; 
if(navigator.appName == "Netscape") IsNetscape = true;
 
The following code initializes the images and declarations and initializes the variables
 
//loading of images
wormy_bg=new Image(); wormy_bg.src="wormy_bg.gif";
wormy_hl=new Image(); wormy_hl.src="wormy_hl.gif";
wormy_ht=new Image(); wormy_ht.src="wormy_ht.gif";
wormy_hr=new Image(); wormy_hr.src="wormy_hr.gif";
wormy_hb=new Image(); wormy_hb.src="wormy_hb.gif";
wormy_m=new Image(); wormy_m.src="wormy_m.gif";
wormy_tl=new Image(); wormy_tl.src="wormy_tl.gif";
wormy_tt=new Image(); wormy_tt.src="wormy_tt.gif";
wormy_tr=new Image(); wormy_tr.src="wormy_tr.gif";
wormy_tb=new Image(); wormy_tb.src="wormy_tb.gif";
wormy_a=new Image(); wormy_a.src="wormy_a.gif";
wormy_b=new Image(); wormy_b.src="wormy_b.gif";
wormy_e=new Image(); wormy_e.src="wormy_e.gif";
 
//initialization of variables
var i, j, Delay=200, StartTime=0, WormLen, MaxX=30, MaxY=18, nApples=10, nBombs, nKeyDowns=3;
AppleX=new Array(nApples);
AppleY=new Array(nApples);
BombX=new Array(200);
BombY=new Array(200);
WormX=new Array(200);
WormY=new Array(200);
MoveX=new Array(nKeyDowns);
MoveY=new Array(nKeyDowns);
 
Detection of the pressing keys
 
//testing of pressing key
function KeyDown(whichkey)
{ //alert(whichkey);
 if (whichkey == 37) Move(-1,0);
 if (whichkey == 38) Move(0,-1);
 if (whichkey == 39) Move(1,0);
 if (whichkey == 40) Move(0,1);
 
 if (whichkey == 50) Move(0,1);
 if (whichkey == 52) Move(-1,0);
 if (whichkey == 53) Move(0,1);
 if (whichkey == 54) Move(1,0);
 if (whichkey == 56) Move(0,-1);
 
 if (whichkey == 65458) Move(0,1);
 if (whichkey == 65460) Move(-1,0);
 if (whichkey == 65461) Move(0,1);
 if (whichkey == 65462) Move(1,0);
 if (whichkey == 65464) Move(0,-1);
 
Function which enables to set up the speed and the length of the Virus, his movement and detection of the collision
 
//moving virus
function Move(xx, yy)
{ if (nKeyDowns>2) return;
 if ((nKeyDowns==0)&&
      (WormX[WormLen-2]-WormX[WormLen-1]==xx)&&
      (WormY[WormLen-2]-WormY[WormLen-1]==yy)) return;
 MoveX[nKeyDowns]=xx;
 MoveY[nKeyDowns]=yy;
 nKeyDowns++;
 if (StartTime>0) return;
 var nn= new Date();
 StartTime = nn.getTime() / 1000;
 setTimeout("MoveWorm("+xx+","+yy+")",Delay);
}
 
//moving worm
function MoveWorm(xx_old, yy_old)
{ var nn, ii, vv, ddx=xx_old, ddy=yy_old, xx, yy;
 if (StartTime==0) return;
 if (nKeyDowns>0)
 { ddx=MoveX[0];
    ddy=MoveY[0];
    for (nn=1; nn<nKeyDowns; nn++)
    { MoveX[nn-1]=MoveX[nn];
      MoveY[nn-1]=MoveY[nn];
    }
    nKeyDowns--;
 }
 xx=WormX[WormLen-1]+ddx;
 yy=WormY[WormLen-1]+ddy;
 nn=WhatIsAt(xx, yy);
 if (nn<-1) //OffBoard, Worm, Antivirus
 { if (nn==-4) window.document.images[MaxX*yy+xx].src = wormy_e.src;
    if (window.opener)
    { if (window.opener.SetHighscores)
      { if (Delay==300) window.opener.SetHighscores("Wormy","slow",WormLen-2,1);
        if (Delay==200) window.opener.SetHighscores("Wormy","medium",WormLen-2,1);
        if (Delay==100) window.opener.SetHighscores("Wormy","fast",WormLen-2,1);
      }
    }
    if (WormLen<9) alert("Oops, virus is destroyed !");
    else alert("Wow, you ate "+eval(WormLen-2)+" computers !");
    return; 
 }
 if (nn>=0) //Computer
 { window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_m.src;
    WormX[WormLen]=xx;
    WormY[WormLen]=yy;
    WormLen++;
    if (WormX[WormLen-2]<WormX[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hr.src;
    if (WormX[WormLen-2]>WormX[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hl.src;
    if (WormY[WormLen-2]<WormY[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hb.src;
    if (WormY[WormLen-2]>WormY[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_ht.src; 
    do   
    { xx=random(MaxX);
      yy=random(MaxY);
      vv=true;
      for (ii=0; ii<nBombs; ii++)
        if ((xx==BombX[ii])&&(yy==BombY[ii])) vv=false;
      for (ii=0; ii<nApples; ii++)
        if ((xx==AppleX[ii])&&(yy==AppleY[ii])) vv=false;
      for (ii=0; ii<WormLen; ii++)
        if ((xx==WormX[ii])&&(yy==WormY[ii])) vv=false;   
      if ((Math.abs(xx-WormX[WormLen-1])<5)||(Math.abs(yy-WormY[ii])<5)) vv=false;   
      if (vv)
      { BombX[nBombs]=xx;
        BombY[nBombs]=yy;
        nBombs++;
      }
    }
    while (!vv);
    window.document.images[MaxX*yy+xx].src = wormy_b.src; 
    do
    { xx=random(MaxX);
      yy=random(MaxY);
      vv=true;
      for (ii=0; ii<nBombs; ii++)
        if ((xx==BombX[ii])&&(yy==BombY[ii])) vv=false;   
      for (ii=0; ii<nApples; ii++)
        if ((xx==AppleX[ii])&&(yy==AppleY[ii])) vv=false;
      for (ii=0; ii<WormLen; ii++)
        if ((xx==WormX[ii])&&(yy==WormY[ii])) vv=false;   
      if ((Math.abs(xx-WormX[WormLen-1])<5)||(Math.abs(yy-WormY[ii])<5)) vv=false;   
      if (vv)
      { AppleX[nn]=xx;
        AppleY[nn]=yy;
      }
    }
    while (!vv); 
    window.document.images[MaxX*yy+xx].src = wormy_a.src;
    document.forms[0].WormLength.value=WormLen; 
 }
 else //Empty
 { window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_bg.src;
   for (nn=1; nn<WormLen; nn++)
    { WormX[nn-1]=WormX[nn];
      WormY[nn-1]=WormY[nn];   
    }
    WormX[WormLen-1]=xx;
    WormY[WormLen-1]=yy;
    if (WormLen>2) window.document.images[MaxX*WormY[WormLen-2]+WormX[WormLen-2]].src = wormy_m.src;
    if (WormX[0]<WormX[1]) window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_tl.src;
    if (WormX[0]>WormX[1]) window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_tr.src;
    if (WormY[0]<WormY[1]) window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_tt.src;
    if (WormY[0]>WormY[1]) window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_tb.src; 
    if (WormX[WormLen-2]<WormX[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hr.src;
    if (WormX[WormLen-2]>WormX[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hl.src;
    if (WormY[WormLen-2]<WormY[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hb.src;
    if (WormY[WormLen-2]>WormY[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_ht.src; 
 }
 nn= new Date();
 document.forms[0].EatSpeed.value=Math.round((WormLen-2)/(nn.getTime()/1000-StartTime)*100)/10;
 setTimeout("MoveWorm("+ddx+","+ddy+")",Delay);
}
 
//detecting object
function WhatIsAt(xx, yy)
{ var ii;
 if ((xx<0)||(xx>=MaxX)||(yy<0)||(yy>=MaxY)) return(-2);
 for (ii=0; ii<WormLen; ii++)
      if ((xx==WormX[ii])&&(yy==WormY[ii])) return(-3);         
 for (ii=0; ii<nBombs; ii++)
    if ((xx==BombX[ii])&&(yy==BombY[ii])) return(-4);
 for (ii=0; ii<nApples; ii++)
    if ((xx==AppleX[ii])&&(yy==AppleY[ii])) return(ii); 
 return(-1);
}
 
Generating of random numbers for location the objects on the display
 
//generate randomize number
function random(nn)
{ return(Math.floor(Math.random()*1000)%nn);
}
 
Initialization of the game start 
 
//Initialization game
function Init(newDelay)
{ var ii, jj, xx, yy, vv;
 if (newDelay>0) Delay=newDelay;
 StartTime=0;
 WormLen=2;
 WormX[0]=12;
 WormY[0]=3;
 WormX[1]=12;
 WormY[1]=4;
 nKeyDowns=0;
 nBombs=0;
 while (nBombs<nApples)
 { xx=random(MaxX);
    yy=random(MaxY);
    vv=true;
    for (ii=0; ii<nBombs; ii++)
      if ((xx==BombX[ii])&&(yy==BombY[ii])) vv=false;
    for (ii=0; ii<WormLen; ii++)
      if ((xx==WormX[ii])&&(yy==WormY[ii])) vv=false;   
    if ((Math.abs(xx-WormX[WormLen-1])<5)||(Math.abs(yy-WormY[ii])<5)) vv=false;   
    if (vv)
    { BombX[nBombs]=xx;
      BombY[nBombs]=yy;
      nBombs++;
    }
 }
 nApples=0;
 while (nApples<nBombs)
 { xx=random(MaxX);
    yy=random(MaxY);
    vv=true;
    for (ii=0; ii<nBombs; ii++)
      if ((xx==BombX[ii])&&(yy==BombY[ii])) vv=false;   
    for (ii=0; ii<nApples; ii++)
      if ((xx==AppleX[ii])&&(yy==AppleY[ii])) vv=false;
    for (ii=0; ii<WormLen; ii++)
      if ((xx==WormX[ii])&&(yy==WormY[ii])) vv=false;   
    if ((Math.abs(xx-WormX[WormLen-1])<5)||(Math.abs(yy-WormY[ii])<5)) vv=false;   
    if (vv)
    { AppleX[nApples]=xx;
      AppleY[nApples]=yy;
      nApples++;
    }
 } 
 for (jj=0; jj < MaxY; jj++)
 { for (ii=0; ii < MaxX; ii++)
      window.document.images[MaxX*jj+ii].src = wormy_bg.src;
 }
 for (ii=0; ii < nBombs; ii++)
    window.document.images[MaxX*BombY[ii]+BombX[ii]].src = wormy_b.src;
 for (ii=0; ii < nApples; ii++)
    window.document.images[MaxX*AppleY[ii]+AppleX[ii]].src = wormy_a.src;
 if (WormX[0]<WormX[1]) window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_tl.src;
 if (WormX[0]>WormX[1]) window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_tr.src;
 if (WormY[0]<WormY[1]) window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_tt.src;
 if (WormY[0]>WormY[1]) window.document.images[MaxX*WormY[0]+WormX[0]].src = wormy_tb.src; 
 if (WormX[WormLen-2]<WormX[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hr.src;
 if (WormX[WormLen-2]>WormX[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hl.src;
 if (WormY[WormLen-2]<WormY[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_hb.src;
 if (WormY[WormLen-2]>WormY[WormLen-1]) window.document.images[MaxX*WormY[WormLen-1]+WormX[WormLen-1]].src = wormy_ht.src; 
 document.forms[0].WormLength.value=2;
 document.forms[0].EatSpeed.value=0;
 document.forms[0].New.focus();
 document.forms[0].New.blur();
}
 
Link to the „Teachers Guide“
 
//open teachers guide
function teachers_guide()
window.open('teachers_guide.htm','','scrollbars=yes,menubar=no,height=500,width=350,resizable=yes,toolbar=no,location=no,status=no');
}
if (navigator.appName != "Microsoft Internet Explorer") document.captureEvents(Event.KEYDOWN);
document.onkeydown = NetscapeKeyDown;
function NetscapeKeyDown(key)
{ KeyDown(key.which);
</script>
 
The combined HTML and javascript code setting up the game background
 
</head>
<BODY bgcolor=#66cccc>
<form>
<DIV ALIGN=center>
<table border cellpadding=0 cellspacing=2><tr><td colspan=4 bgcolor=#66cccc background="wormy_bg.gif">
<script language="JavaScript">
document.open("text/plain");
for (j=0; j < MaxY; j++)
{ for (i=0; i < MaxX; i++)
    document.write("<IMG src=\"wormy_bg.gif\" border=0>");
 if (j<MaxY-1) document.write("<BR>");
}
document.close();
</script>
 
HTML code which enable to set up the introduction display of the game objects
 
</td></tr><tr>
<td align=center bgcolor=#ffff99>
    <input type=radio name="speed" value="1" onClick="javascript:Init(300)"><B>slow</B>
    <input type=radio name="speed" checked value="2" onClick="javascript:Init(200)"><B>medium</B>
    <input type=radio name="speed" value="3" onClick="javascript:Init(100)"><B>fast&nbsp;&nbsp; </B>
</td>
<td align=center bgcolor=#ffff99><table noborder cellpadding=2 cellspacing=2><tr>
 <td><B>virus length:</B></td>
 <td><input type=button value="2" name="WormLength" width=40 style="width:40; background-color:#FFFFFF"></td>
</td></tr></table></td> 
<td align=center bgcolor=#ffff99><table noborder cellpadding=2 cellspacing=2><tr>
 <td><B>eat speed:</B></td>
 <td><input type=button value="0" name="EatSpeed" width=40 style="width:40; background-color:#FFFFFF"></td>
</td></tr></table></td> 
<td align=center bgcolor=#ffff99><table noborder cellpadding=2 cellspacing=2><tr>
 <td><input type=button value="New game" name="New" width=68 style="width:68" onClick="javascript:Init(0)"></td>
 <td><input type=button value="Teachers guide" width=96 style="width:96" onClick="javascript:teachers_guide()"></td>
</td></tr></table></td> 
</tr></table>
</DIV>
</form>
<script language="JavaScript">
 Init(200);
</script>
</BODY>
</HTML>