html5 game development

I have wanted to create a simple HTML5 game development tutorial for a long time. It always frustrates me when people (web developer people) tell me they would love to make games but just can’t get their head around it or figure out where to start.

There are so many myths and misconceptions with JavaScript and HTML5 that I figured a few pages offering my own (rather straight forward and by no means complicated) approach to game design and development might benefit someone else.

I am not (and never have been) an expert. I write my JavaScript in a style that hasn’t changed too much in the last 10 years. You may like it and find it refreshingly readable (I hope so), or you may hate it and deplore its apparent amateurishness. I guess at this stage I should add that I intend to aim this series at the absolute beginner. The complete novice. If you are a JavaScript cadet, maybe written a few document.getElementById methods and done some nice stuff, then you are probably going to be my target audience. If you are a hardcore JavaScripter and get all frothed up at the idea of writing in one of several patterns then I’d suggest you’re not going to be moving forward reading this. If however you have half an interest in making a simple arcade game…

Above all I want to illustrate just how easy it is to craft a simple game using HTML5, JavaScript and CSS. Several things are beyond the scope of this tutorial series but you can find all of that using this wonderful resource that is the internet. I will where possible point you in the right direction.

For the purposes of this tutorial HTML5 pretty much boils down to the use of the CANVAS API. We will draw to the canvas, slap some text on there and generally get a feel for working with its 2D context. We will also handle other game elements such as key/mouse/touchscreen input, sprite movement & animation, collision and scoring. I will use a simple space shooter to illustrate the process not least because I adore space shooters. They also as it happens provide everything you need to get a convincing game up and running.

At the top of each page I will present (within an iFrame) the game as represented by the code we are discussing. I will present any relevant or important code snippets below. Finally I will provide a link to the code where necessary beneath the accompanying code.

I LOVE making games. I’m sure I will enjoy writing this tutorial. I hope that you enjoy the journey with and gain something from it. If you have anything to offer please do get in touch or offer some comments.

Finally please email me if you feel I have missed something crucial. If necessary I will expand on something and offer a bit more of my limited knowledge :)

5 Responses

  1. Great article. HTML5 games a really ready for prime time now. I dare say: No more need for Flash!

  2. Please go on with tutorials, i’m trying to learn how to do HTML5 games hands on, without learning a 800 pages Js book…
    Thank you
    Frank

  3. Perfectly timed Mark. Can’t wait to read more. I am just about to start toying with simple puzzle games, but keen to learn about some of the tricks you’re using for canvas based stuff.

    Be great to hear your thoughts about options for adding in multiplayer functionality as well :)

Leave a Reply to HTML5 Game Development Tutorial | in search of Space Monsters … Cancel reply

Photo of Atari VCS console and pre-order information
Playstar graphic
Minecraft Global CD Key
%d bloggers like this: