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.
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 :)