Learning Javascript using the game ESCAPE OF VIRUSES
ESCAPE OF VIRUSES
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.
The game Escape of viruses usesJavascript and standard HTML.
The button Start game enables to start the new game.
The button Start game enables to start the new game.
The task of a player is to eliminate the viruses from the playing area by clicking on the virus with the mouse’s right button. Number of instantly displayed viruses can not reach the value of 5. The game ends when there are 5 viruses on the playing area. After the game end the information panel is displayed with the number of eliminated viruses and the offer to play new game or close the browser window.
On the playing area there is visible information about the number of
eliminated viruses and actual number of viruses on the area. Before the game starts there is possible to set up the speed of display the new viruses.The link See and download best-known antivirus enables to open the new screen with the list of the most known antivirus programmes. The open source programmes have the link to download free.
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 the 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 Mozzilla 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 a 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 (standard for the files to be opened in any internet browser).
Save the text displayed in the word editor as a file of any name and use either “html” or “htm” extension (standard for the files to be opened in any internet browser).
Another essential file is laydiv.js, which contents the functions for display the viruses on the playing area and function for link to the Teachers Guide.
This file can be download via deleting the name „escape.htm“ in the address of the browsing bar and its substitution by „laydiv.js“
Images are another essential part of the game.
The list of images used is as follows:
pic0.gif, pic1.gif, pic2.gif, pic3.gif, pic4.gif – images of viruses
pozadi.gif – background image
The images can be downloaded via deleting „escape.htm“ in the address of the browsing bar and its substitution e.g. „/images/pic0.gif“ (there are in the directory images).
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.
Correct function of all downloaded components of the game can be verified by launching the “escape.htm” file.
There is also possible to download the page with information about antivirus by the similar way. The pictures are again in the directory “images”.
The list of images used is as follows:
avast.jpg, avg,jpg, avira.jpg, eset.jpg, kasperski.jpg, symantec.jpg
Replacing images
The viruses images can be replaced in the game by 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 image file, provided they modify its source code accordingly as described below.)
(More experienced programmers can use a different type of 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)
(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)
(description of this feature is outside of the scope of this manual and can be found on the web)
Using Different Image File Format
- 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)
Set Up of Own Values for Viruses Speed Display
In the file “escape.htm” find the following html commands for switch by type RadioButton:
<input type=radio name="speed" value="1" onClick="javascript:SetSpeed(700)"><B>slow</B>
<input type=radio name="speed" checked value="2" onClick="javascript:SetSpeed(500)"><B>medium</B>
<input type=radio name="speed" value="3" onClick="javascript:SetSpeed(300)"><B>fast
<input type=button value="Start game" name="New" onClick="javascript:Init()">
<input type=button value="Teachers guide" onClick="javascript:teachers_guide()">
Each switch has set the event the mouse click on the Javascript function SetSpeed. This function is defined numerously, where is possible to set up the own speed.
ATTENTION !!! There is necessary to set up the right values according to the chosen switch, it means for the slow speed the higher value, as is visible from the code above. The value means the number of milliseconds delay between another virus displays.
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.
HTML code for setting up the initial screen, background, drivers and links:
<HTML>
<title>JavaScript Game - Escape of Viruses</title>
<script src=laydiv.js></script>
<link rel="stylesheet" type="text/css" href="css/game.css" />
<body background="images/pozadi.jpg" bgcolor="black" text="yellow">
<form name=Form>
<table width=706>
<tr>
<td align="left">
<h1>Escape of Viruses - You lose if 5 viruses escapes !</h1>
<p><a href="antivirus.htm" target="_blank">See and download best-known antiviruses</a></p>
Score:
<input size=2 name=score>
Number of viruses:
<input size=2 name=Visib>
<input type=radio name="speed" value="1" onClick="javascript:SetSpeed(700)"><B>slow</B>
<input type=radio name="speed" checked value="2" onClick="javascript:SetSpeed(500)"><B>medium</B>
<input type=radio name="speed" value="3" onClick="javascript:SetSpeed(300)"><B>fast </B>
<input type=button value="Start game" name="New" onClick="javascript:Init()">
<input type=button value="Teachers guide" onClick="javascript:teachers_guide()">
<hr>
</form>
</table>
</body>
<script>
Javascript functions setting up the random X and Y axis for the viruses display on the screen.
//Random setting X axe
function GetY(i){
return 130+100*(i%3)+Math.floor(Math.random()*80)
}
//Random setting Y axe
function GetX(i){
return 150*Math.floor(i/3)+Math.floor(Math.random()*80)
}
Javascript function for the virus display on the screen.
//Showing and hidding Virus
Pop=new Array()
for(x=0;x<9;x++)
{
Pop[x]=0
GetDiv("Spider"+x,GetY(x),GetX(x),60,60,'',Pop[x],1)
document.write("<a href='javascript:GetHim(",x,")'><img name=Spid",x," src='images/pic",Math.floor(Math.random()*5),".gif' width=50 height=50 border=0></a>")
EndDiv()
ShowHide("Spider"+x,0)
}
Score=0
function GetHim(x){
if(Pop[x]==0)return
ShowHide("Spider"+x,0)
Pop[x]=0
Score++
v--
PutIt("Spider"+x,GetX(x),GetY(x))
document.Form.score.value=Score
document.Form.Visib.value=v
}
v=0
function Pops(){
r=Math.floor(Math.random()*9)
Pop[r]=(Pop[r]==0)?1:0
ShowHide("Spider"+r,Pop[r])
v+=(Pop[r])?1:-1
document.Form.Visib.value=v
if(v>4) Lose()
}
Function for setting up the game speed
//Setting game speed
var speed=500
function SetSpeed(sel_speed){
speed=sel_speed
}
Function for the game initialization
//Game Initialization
function Init(){
game=setInterval('Pops()',speed)
}
Function for the game end
//End game
function Lose(){
clearInterval(game)
alert("Game over!\nYour score :\n"+Score)
location=(confirm("Play again?"))? "escape.htm":"javascript:window.close()"
}
</script>
</HTML>
The above code is linked to the file laydiv.js, its functions are used in the game Catcher and described in the game documentation.
The file contains the function for open the new window Teachers guide in addition.
function teachers_guide()
{
window.open('teachers_guide.htm','','scrollbars=yes,menubar=no,height=500,width=350,resizable=yes,toolbar=no,location=no,status=no');
}
