HTML Editor Cannon

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 Cannon uses Javascript and standard HTML.

The player shoots off the balls using the cannon. The balls in interaction with the same objects cause mass detonation of the same objects and the player’s score growths.  Achieved score means number of detonated balls and it is continuously visible.

If the shot ball hits to the object which is not identical, then there is no detonation caused and all the balls stay on the screen. When the screen is full of balls, the game finishes.
The cannon is continuously rotating from left to the right and back and the player has to shoot off the ball at the moment of targeting on the object.
 

The balls are the logos of the most popular HTML editors which are available free or paid. Their list is in the Teachers Guide.

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:

dreamweaver.png, homesite.png, microsoft.png, seamonkey.png    –  HTML editors pictures

cannon.png  –  cannon picture
 

The images can be downloaded via changing the address in the browser bar:  „cannon.htm“  is replaced with for example „images/dreamweaver.png“

(example:  www.ingot.org/javascript/catch/cannon.htmto www.ingot.org/javascript/catch/images/cannon.png)
 

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 thecannon.htm file.

The files containing the JavaScript code have to be also downloaded:
cannon.js
enemy.js
game.js
jquery.1.3.2.min.js
scene.js
scores.js
shot.js
sprite.js
tileactions.js
tilefactory.js
tileflow.js
tiles.js
utils.js
vclass.js

The process of downloading is the same like in the example of images.

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)

Change of Folder Name, Using Different Image File Formats

If it is necessary to use different image file formats or folder where there are located, then there is necessary to provide the modification in the file catch.htm. This activity is focused on more experienced programmers.

• HTML editors images: in the file sprite.js  in the code, line 34
  (this._src = options.src || 'images/' + this._type  + '.png';                           ) the folder images has to be replaced by selected folder and type png by selected type of image
• Cannon picture: in the file cannon.js  in the code, line 38
  (this.img.src = 'images/cannon.png';     ) the folder images has to be replaced by selected folder and type png by selected type of image

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.

Heading of the File HTML

<!DOCTYPE html>
<html>
<head>

                <meta http-equiv="Content-Type" content="text/html; charset=Windows-1250" />
                <title>HTML Editor Cannon - JavaScript Game</title>

Here are attached the files, where the JavaScript codes are located. (The files can be downloaded according to the description above. In all files there is a brief help to different functions in English language.)

                <link href="css/main.css" media="screen" rel="stylesheet" />               
                <script src="js/jquery-1.3.2.min.js"></script>
                <script src="js/utils.js"></script>           
                <script src="js/vclass.js"></script>        
                <script src="js/sprite.js"></script>
                <script src="js/enemy.js"></script>     
                <script src="js/scene.js"></script>                       
                <script src="js/scores.js"></script>
                <script src="js/tiles.js"></script>           
                <script src="js/tilefactory.js"></script>              
                <script src="js/tileactions.js"></script>                              
                <script src="js/shot.js"></script>          
                <script src="js/tileflow.js"></script>    
                <script src="js/cannon.js"></script>    
                <script src="js/game.js"></script>                        
                <script>

Initialization of the game start

                $(function(){
                               new Game();
                });
                </script>
</head>

<body>
                <noscript>Please enable JavaScript</noscript>

Definition of information items and links

         <p align="center">HTML Editor Cannon</p>
                <div class="container">
                               <div class="loading">
                                               loading...
                               </div>                                                              
                              <div class="menuView">
                                               <a class="game" href="#">New Game</a>
                                               <a class="scores" href="#">Scores</a>             
                                               <a class="credits" href="#">Credits</a>                                           
                               </div>                              
                               <div class="gameView">
                                               <div class="field">
                                                               <div class="score"></div>
                                                               <div class="deathLine"></div>
                                                               <div class="overlay"></div>
                                               </div>
                                               <div class="info">
                                                               <div class="score">Skóre: <span class="value">0</span></div>
                                                               <div class="cannon"><canvas width="200" height="50"></canvas></div>                       
                                                               <a href="#" class="restart">Restart</a>
                                <a href="teachers_guide.htm" class="teacher" target="_blank">Příručka učitele</a>
                                               </div>
                               </div> 
                               <div class="scoresView">
                               </div>                 

                               <div class="creditsView">
                               </div>                 
                               <div class="help">
                               </div>
                </div>
</body>
</html>