Making Sprite-based Games with Canvas

By  on  

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!

Canvas Game

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!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

  • By
    Using Opacity to Show Focus with MooTools

    I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level.

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!