Flash Tutorial Links:
Play Games: HTML5 Tutorials:

Setup Your HTML5 Game

Who would have thought that HTML and Javascript, both of which existed so many years back, would combine together to create a new wave of pervasive games that would rival other prevalent platforms in the modern world.

Foreword

The tutorials here in general make a basic assumption that you are not a total newbie to programming or basic html. The walkthrough of the codes will zoom in and highlight areas that are crucial to creating the game, but expects some basic understanding of html as well as how to code in Javascript.

Also, in the name of clarity and ease of explanation, optimization of codes is not done.

Getting Started

To get started, you will need an HTML file, a game.js javascript file as well as a constants.js javascript file. The screenshot of the file structure is shown below.

file structure

The HTML file will display the game for the player to see and interact with. This includes anything from the game menu options, the game sprites to the buttons to press. The javascript files are where the heart and soul of your game lies, and is responsible for powering up almost everything that happens in your game.

Take note to place them all in the same folder for now, until you're more confident to move files around, and assigning the proper references accordingly. The next 3 simple steps will help you create the foundation of your very own HTML5, javascript game.

Step 1 - Create the HTML file

We will create a bare bone HTML file first. We will be making use of the canvas object in HTML5 to play our game in. Do note that older browsers may not support this extensively. A bare bone sample is shown below.

barebone html

We will be write a few lines of code to link up the html with the game.js as well as to create a canvas object for the game to be played in. The edited html will look something like this.

edited html

Notice that the only change is within the body tags. A canvas tag has been added, and is named "gameCanvas". The naming is important, as we will make references to it inside the javascript file. The text within the canvas tag will only show if the player's browser does not support the latest HTML5 features like this canvas tag. In that case, the suggestion made to the player would be for him to go install the latest browsers.

The next two lines are script tags, and they will link up the constants.js as well as game.js with the html file.

Step 2 - Create the constants.js file

Let us handle the simpler javascript file first. The reason why a constants file is required is basically to help consolidate all static numbers, initialization values, into a single file that you, as the game developer, can edit quickly. Things you will find here will include values such as how many lives your player starts with, damage of certain weapons, etc. Rather than embed those numbers into your far more complex (and potentially confusing) game codes, putting them here in the constants file gives you an advantage of being able to spot them easily, and editing them quickly to balance or test your game.

//------------
//System Values
//------------
var STAGE_WIDTH = 600,
	STAGE_HEIGHT = 400,
    TIME_PER_FRAME = 33, //this equates to 30 fps
    GAME_FONTS = "bold 20px sans-serif";
	
var COUNTER_X = 100,
	COUNTER_Y = 100;

In our simple example here, our constants file will contain just a few values. Lines 4 and 5 tell the game how large the game area will be, for example. Line 6 will be used subsequently to determine how fast your game executes.

Also note that by popular convention, constants are written in UPPER CASE.

Step 3 - Create the game.js file

We will not be going into an actual and far more complex game javascript file for now, but I will be demonstrating a stripped down version of it, just enough for you to see something changing in the "game". An example of the game javascript is shown below.

//------------
//System Vars
//------------
var stage = document.getElementById("gameCanvas");
stage.width = STAGE_WIDTH;
stage.height = STAGE_HEIGHT;
var ctx = stage.getContext("2d");
ctx.fillStyle = "black";
ctx.font = GAME_FONTS;

var gameloop = setInterval(update, TIME_PER_FRAME);
var counter = 0;

//------------
//Game Loop
//------------
function update()
{	
	counter++;
	
	//Clear Canvas
	ctx.fillStyle = "#AAA";
	ctx.fillRect(0, 0, stage.width, stage.height);	
		
	//Draw Timer
	ctx.fillStyle = "#000";
	ctx.fillText(counter, COUNTER_X, COUNTER_Y);
}

Lines 4 to 9 lists down a set of system variables that will be used throughout the game. Line 4 first assigns to the variable stage the reference to the <canvas> object, which we created in the html file and gave it an id of "gameCanvas".

Lines 5 and 6 tell the computer how big the dimensions of the game will be. Notice that we assign two variables STAGE_WIDTH and STAGE_HEIGHT to the variables stage.width and stage.height. But nowhere is it coded in this game.js what the values of STAGE_WIDTH and STAGE_HEIGHT are. Remember the constants.js file we coded earlier on. This demonstrates that the two javascript files are linked. Just to reiterate, the reason why we have a constants.js file is that by holding all such constants in a common file, any amendments to be made on such values can be done easily. Experienced programmers should understand this concept fairly quickly, but if you find it hard to understand, you will find it useful once you start coding your own games.

var ctx = stage.getContext("2d");
ctx.fillStyle = "black";
ctx.font = GAME_FONTS;

It is important to note that the canvas element has no drawing abilities of its own. It is only a container for graphics and script like the Javascript we are coding are used to actually draw the graphics. The getContext() method you see in line 7 returns an object that provides methods and properties for drawing on the canvas and assigns it to the variable ctx.

var gameloop = setInterval(update, TIME_PER_FRAME);
var counter = 0;

We will be going in depth as to what a game loop is in the later tutorials, but for now, just to demonstrate that all 3 files - html, game.js and constants.js are linked up, we set up a game loop that runs 30 times a second in line 11. The counter variable in line 12 is just so that you can see something changing within the "game".

//------------
//Game Loop
//------------
function update()
{	
	counter++;
	
	//Clear Canvas
	ctx.fillStyle = "#AAA";
	ctx.fillRect(0, 0, stage.width, stage.height);	
		
	//Draw Timer
	ctx.fillStyle = "#000";
	ctx.fillText(counter, COUNTER_X, COUNTER_Y);
}

Every tick of the game (there are 30 ticks a second), the update function will execute. You can see the context drawing capabilities in lines 22 and 23, where we will fill the entire game area with a colour of "#AAA", which is greyish.

Line 26 and 27 will output the counter text onto the screen. The end result will look something like below. The grey area represents the entire game area, which we set earlier to 600x400 pixels. Keep it open and you can see the counter running endlessly.

running counter

Until Next Time

And with that, we're done. The "game" that we have created looks all but spectacular, but fret not. This tutorial shows the simplicity with which you can establish the link between your javascript files and the canvas object in your html. The magic is only just getting started!

Downloads

You can view the demo of this tutorial here (opens in new window).

You can download the files used in this tutorial here.



Flash Resources
Preloader FPS Display Sounds & Music
Keycodes Name Generator

Game Development Resources
Sprite Sheets


Flash Tutorial Links:
Play Games: HTML5 Tutorials:
gaming tools download on app store now!
Home | About Us | Contact Us
Powered by Make Flash Games. All Rights Reserved.
By Joseph Tan