Tutorial: Making a Canvas Snake Game

Everyone's excited about the gaming possibilities that HTML5 brings, especially via the Canvas element. CSS master Chris Coyier has a nice guest post on his blog by JS stud, Nick Morgan, who is one of those who are excited and decided to gain some experience by making a Canvas-based snake game:

Of all the new elements being added in HTML5, I think canvas is one of the most exciting. Canvas gives you a fixed-size drawing surface and a selection of basic commands to draw on that surface.

In this tutorial I'm going to show you how to make a simple snake game using canvas. You know, like you used to get on your Nokia phone.

Rick walks you step-by-step explaining what the Canvas element is, how you can do simple animation and then roll it all up into a neat game. I especially loved his use of JSFiddle so that readers can instantly run the code and get feedback within the article.

Now don't expect a King Cobra or Python to appear. The end result is REALLY basic but that's the point of it; to give an intro to Canvas animation.

Definitely worth a look if you're interested in taking advantage of Canvas and gaming.