Sunday 20 January 2013

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

7 comments:

  1. Awesome post! Do you think there is any interest for a wifi / web sockets controller for HTML 5 games? I have prototypes of using a Nintendo DS and Atari joystick/Arduino to play HTML5 Pacman in any HTML5 browser. Would love to find game devs interested in adding a real controller to their games. 

    ReplyDelete
  2. That is a very interesting idea if I understand correctly.
    Are you suggesting that a socket connection would go to the DS and pick up keypresses?

    I think people would be very interested in the general idea anyways.

    ReplyDelete
  3. Hey nice tutorials!
    I want to a tutorial.İf you show me how to make a defence game,I will be happy.Thanks Steve :)

    ReplyDelete
  4. I made this post on vacation and couldn't find this article again.

    Yes, the DS communicates via a socket, sending keypresses to the game.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete