Making Sprite-based Games with Canvas
One advantage to working for Mozilla is the amount of talent that surrounds me; James Long is one of those people. James seems to know more about software engineering than anyone probably should. I asked James to write a canvas-centric tutorial to show you all how to create a simple canvas game; he far exceded expectation, so much so that I couldn't dare repost it here. Below is a summary of his epic post; please jump over to his site for the complete post!
The canvas element was introduced with HTML5 and provides an API for rendering on the web. The API is simple, but if you've never done graphics work before it might take some getting used to. It has great cross-browser support at this point, and it makes the web a viable platform for games.
Using canvas is simple: just create a <canvas> tag, create a rendering context from it in javascript, and use methods like fillRect and drawImage on the context to render shapes and images. The API has a lot of methods for rendering arbitrary paths, applying transformations, and more.
In his article, James is going to create a 2d game with canvas; a real game with sprites, animations, collision detection, and of course, explosions! What's a game without explosions?
James will be updating his post (adding features, fixes, etc.) over the coming weeks and months so be sure to bookmark it and check often!
