How to Make a HTML5 Game (HTML5 Game Development Guide)

In this blog, I've got helpful tips spread out everywhere, so in this post I will organize a list of links to the posts I think would be most helpful.

I'll keep this list updated when I think of more stuff to put in it. And I'm open to suggestions, if you have any, you can contact me via @SlashGame on twitter (By the way, I'm more likely to see a mention than a Private Message).

21/01/2013: Updates to these pages have begun.
22/01/2013: Information improved in Game Loop and Simple Game Phsyics articles.


The first thing is, you should understand what the canvas is.
HTML5 Canvas Explained.

Then, you're going to want to know how to render an image or text to the canvas.
Display Image on Canvas
Canvas Background Image
Draw Text to the Canvas

Then, for the actual game, you need to be able to set up what's known as a "Game Loop" in order to show moving characters and such based on user input.
Game Loop
Keyboard Input (helpful function you can use)
Mouse Input

Now, all you need to know is the fancy stuff that you may want to use to make the game feel right.
Simple Game Physics
Rotating Image on Canvas
HTML5 Audio



If you like to learn things visually, then I've got a video on how to make a simple game.
Video Introduction to HTML5 Game Development

And I have a list of helpful snippets of code.
Snippet List

If you want to make money from your games, I suggest you take a look at this:
How to Make Money From Your Games