Part 1 – The beginning – You Are Here!
Part 2 – Moving stuff around
Part 3- Simple Parallax Stars

Recently there has been a ton of talk around HTML 5 and the canvas so i decided that I needed to build some tutorials. In this effort I decided to do one of the things I love and that was build a game. I am going to break these tutorials down into manageable chunks.

So what is HTML 5 and why are people so crazy about it?

Well firstly it is the current HTML standard that is being worked on by the W3C and WHATWG. It comes with some new features such as Video and Audio support and the introduction of a Canvas Element which allows us to draw to the screen. There are also some changes to the HTML mark-up itself, below is an example of a basic HTML 5 page:

<!DOCTYPE html>
<html>
<head>
    <title></title>    
</head>
<body>
</body>
</html>

So it looks like pretty standard HTML but the biggest difference so far is the <!DOCTYPE… declaration. You no longer need to specify complex doc types just “html” and the browser will know its HTML 5.

Enough about HTML lets build a game, already!

So the game we are going to build here is a simple side scrolling space shooter. We are going to need a couple of tools:

  1. A text editor or IDE.
  2. Images
  3. Audio
  4. HTML5 compatible Browser with Developer Tools

I am going to use plain old notepad, IE9, mspaint and audacity to create the resources i want, but hey use what ever you are most comfortable with. So lets get started.

Creating an HTML 5 page:

Create a new folder on your drive where we are going to store all the files. I called mine the swarm because i am going to do some flocking intelligence in it. Inside that folder create a text file called Game.html. Open this file with your text editor and paste the text from above into it.

01 Getting Started

Save the file and open it in your browser it should show a blank page.

Adding the first large pixel:

So now lets draw some things on the screen. First we need to add the canvas tag into the body element:

<canvas id="myCanvas" width="400" height="200">
        This game was written for HTML5 compatible browsers.
</canvas>

The canvas tag is very much a place where you can literally paint things onto the screen. You access the canvas tag using JavaScript and getting a context from the canvas. The W3C Specification of the Canvas element can be found - http://www.w3.org/TR/html5/the-canvas-element.html. Lets add a little script to the header:

<script>
    window.onload = draw;
    function draw(){
        var canvasName = "myCanvas";
        var elem = document.getElementById(canvasName);
        if (elem && elem.getContext) {
                var context = elem.getContext("2d");
            if(context){
                context.fillRect(0,0,50,50);
            }
        }
    }
</script>  

So what does this script do:

One it tells the engine to call the draw function when the window onload event is raised by using “window.onload = draw;”. We then get the canvas element from the DOM. We do a little bit of checking and then call getContext, what getContext does is return an object which exposes the drawing API. The “2d” parameter we pass specifies we want the 2d API from the canvas element. We then do a little more checking and then call fillRect which draws a rectangle which has a default colour of black. What you should get is:

01 HTML

So thats how we get the HTML Canvas context as well as draw our first block on the screen. In the next tutorial we will cover translation and rotation of these elements.

Till the next tutorial

Dave

Source code below:

Game.html

<!DOCTYPE html>
<html>
<head>
    <title>The Swarm</title> 
    <script>
    window.onload = draw;
    function draw(){
        var canvasName = "myCanvas";
        var elem = document.getElementById(canvasName);
        if (elem && elem.getContext) {
                var context = elem.getContext("2d");
            if(context){
                context.fillRect(0,0,50,50);
            }
        }
    }
    </script>  
</head>
<body>
    <canvas id="myCanvas" width="400" height="200">
            This game was written for HTML5 compatible browsers.
    </canvas>
</body>
</html>