Making Javascript and HTML5 games

Question

A long time ago (Netscape 4-era), I wrote Javascript-based games: Pong, Minesweeper, and John Conway's Life among them. I'm getting back into it, and want to get my hands even dirtier.

I have a few games in mind:

• Axis & Allies clone, with rugged maps and complex rules.
• Tetris clone, possibly with real-time player-vs-player or player-vs-computer mode
• Breakout clone, with a couple weapons and particle velocities

In all of these, I have only a few objectives:

• Use JavaScript and HTML 5 - it should run on Chrome, Safari, or maybe an iPad.
• Start small and simple, then build-up features.
• Learn something new about game design and implementation.

So my questions are:

1. How would you implement these games?
2. Do you have any technology recommendations?
3. If you've written these games, what was the hardest part?

---

N.B. I also want to start from first-principles - if you recommend a framework/library, I would appreciate some theory or implementation details behind it. These games are different enough that I should learn something new from each one.

Answer 1

Take a look at ChromeExperiments The examples are from around the world using the latest open standards, including HTML5, Canvas, SVG, and javascript.

Answer 2

The hardest part, for me, was that there were no tools to help make the graphics, as there is no Maya export to canvas, for example, so, everything is done manually, with primitives, unless you want to take bitmaps that you will modify as though they are sprites.

At the time there was no real support for text in canvas, so my solution didn't work using excanvas, but worked fine on Safari and Firefox.

So, you may want to look at what HTML5 features you want to support, such as a built-in database, and then decide which browsers you are willing to work on.

How to implement these will largely depend on how you want to create the graphics, and if you want to do 3D graphics, as then the bitmapped sprites would not work.