HTML5 Game Boilerplate Page Javascript File Game.js

Creating a Javascript file, game.js
This is the file where the client game code will be located. This code will be executed on the user browser. It’s a simple code, only sets a black canvas background and draw a Hello World! text.

Since last article, you know how to create a new folder and a file on Cloud9 IDE. Create a ‘game.js‘, inside a folder named ‘js‘. You can see the project tree here: HTML5 Mini Games on Cloud9 IDE.

Copy this code in your newly created ‘game.js‘ file:

window.onload = function() {
    //First, we have to create a 2d canvas context reference
    var canvas = document.getElementById('game');
    var ctx = canvas.getContext('2d');
    // Fills the canvas background with a black solid color.
    ctx.fillStyle = "black";
    ctx.fillRect (0, 0, canvas.width, canvas.height);
    //Writes the Hello World! message
    var text = "Hello World!";
    ctx.font = 'bold 20px Arial';
    ctx.fillStyle = 'white';
    ctx.fillText (text, 10,30);

game.js File on the Cloud9 IDE

These few lines of JavaScript code, hide great complexity. In the case that you don’t have experience with Javascript and DOM, i suggest you to read carefully the links that you will find on the line by line code explanation. If not, next code articles everything will seem magical. If you don’t have problems understanding these lines of code, you can skip the rest of the article and go directly to the next article.

Line 1. window.onload.
This is used to call a function when the page has completely loaded. If our Javascript code is going to modify/read the DOM, then this is completely necessary to be sure that our code will not execute until the page is loaded. Or at least wait until the DOM tree is ready, as it does the JQuery $(document).ready.

Line 1. function () {…};
The function that will be asigned to the event manager window.onload. Oversimplifying, a function is a set of instructions that receive some values, work on them and return a result. More about functions.

if you use other programming languages​​, some things can result a bit strange:

First: We are assigning a function!. But in Javascript, all are represented by objects, functions too. So we can assign a function to a variable, we can pass functions as parameters of other functions, and get functions as a result of the execution of another function.

Second: That function does not have a name.. It’s an anonymous function. You do this when you want to create a function but you’ll only use this function one time. Anonymous functions are used to create more advanced programming patterns.

Line 2. It’s a comment. To create a single line comment in JavaScript, you place two slashes “//” in front of the code or text you wish to have the JavaScript interpreter ignore. For large comments you can use JavaScript’s multi-line comment that begins with /* and ends with */. Commets are used to debug code too. You can comment some lines of code without deleting them to test what is happening and find errors.

Line 3. var canvas.
With this instruction we are declaring a variable which is named canvas. A variable is nothing more than a memory space where data is stored. The word var is used to create a new variable. After var, the name of the variable follows.

Line 3. document.getElementById(‘game’).
With this instruction we get a reference to the html element whose attribute is id=”game”. In our case it is the canvas element.

The Document Object Model (DOM) is an API for HTML documents. Provides a structured representation of a web document. Allowing you to modify its content and visual presentation using a scripting language such as JavaScript.

DOM document object: document
When you load a web page in your browser, it has its own object to access to its contents, document. More about DOM: Using the W3C DOM Level 1 Core. Cheatsheet DOM Javascript: DOM javascript cheat sheet

Line 3. var canvas = document.getElementById(‘game’);
Store in the canvas variable, the html element reference whose id is game.

More about de Canvas API: Canvas tutorial. Canvas Cheatsheet: HTML5 Canvas Cheat Sheet.

Line 4. var ctx = canvas.getContext(’2d’);
Assign to a new variable, ctx, a reference to the context of 2D drawing Canvas API. The ctx Object allows draw on canvas.

Lines 7 to 8. Create a black background by drawing a rectangle that fills the canvas.
fillStyle sets the color you want to use. fillRect(X, Y, width, height) draw a rectangle as large as the canvas element itself. The first two parameters, sets the X and Y coordinates to the top left rectangle (0,0). canvas.width and canvas.height get the width and height of the canvas element, and we use this to indicate the width and height of the rectangle we want to draw.

Lines 11 to 14. Create a white text.
Line 11, sets the variable text with the text that we want to draw on the canvas.
Line 12, sets the text style, ‘bold 20px Arial’. Same format as CSS font.
Line 13, sets again the color with fillStyle. You have to change the black color that we use to draw the background to white.
Line 14, draw the text with fillText(TEXT, X, Y). The first parameter contains the text that we want draw. X and Y, sets the coordinates where we want to draw the text.

This entry was posted in Game Development and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *