Introduction to HTML5 Game Programming by James R. Pierce

Introduction to HTML5 Game Programming

by James R. Pierce

In this article I'll give you a brief introduction to HTML5 game programming, the most modern method to create browser games. With the release of HTML5 a new HTML tag, called the canvas, was introduced. This tag allows us to place a transparent canvas on a webpage and draw on it. If we draw, clean, and re-draw this canvas many times per second we are creating animations, which is eventually how we can create our HTML5 browser game. This summarizes HTML5 game programming pretty neatly. However, there's still more to it which I will cover in the following paragraphs.

The HTML5 Canvas API

Even though it's called HTML5 game programming, we actually program these types of browser games in JavaScript. The reason why it's called HTML5 is the canvas tag which I've mentioned above. As a matter of fact, the canvas is more than just a new HTML tag: It's an API for JavaScript. Thanks to this API we can use JavaScript to manipulate and modify the canvas and what we display inside the canvas on our webpage. For example, we can re-size it and draw shapes, colors and words inside of it. Moreover, we can even put images, videos and sounds inside of it. These canvas features combined with the skills of an experienced programmer can result in some amazing browser games.

What We Need to Create HTML5 Browser Games

So far I've mentioned the HTML5 canvas tag and JavaScript. However, there's more that we need to create such browser games: images, sound and CSS. The types of images you choose will determine the art style of your game. Most likely, you will have to hire a designer or buy the images for your game. Moreover, you will need sprites and sprite-sheets to animate characters, enemies and the environment in your game. Similar things can be said about the sound, which will set the mood of your game. However, images and sound are not specific to HTML5 browser games. In fact, they are necessary for any game.

Turning the Browser Into a Gaming Console

The future dream of HTML5 game progammers like myself is to turn our web browsers into a viable gaming console. Already with the tools that we have today we can achieve this. What we need for the future is the gamer community to start seeing the browser as a gaming console. For this reason, we must use CSS to style the canvas and give it a graphical user interface. The canvas is our game screen - like the screen of a TV or computer. If we want it to look like a gaming console, we can center the canvas in the middle of the browser window, resize it and design it nicely. To do all of this, we can use CSS or a mixture of CSS and JavaScript.