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

Depends how much you want to start from scratch. To answer your direct questions:

1) How would you implement these games?

A: JavaScript + Canvas. Canvas is the 2D drawing surface from HTML5. Performance is pretty good on desktop machines, not so great on iOS and Android devices (as of the date of this post). If mobile is your utmost concern, you need to use the DOM and CSS3 3D transforms which trigger the GPU on those devices.

2) Do you have any technology recommendations?

A: This is sort of answered by the first question. JavaScript is a must, but I would ignore jQuery. You are targeting HTML5 devices, so no need to compensate for legacy browsers. As you are probably using Canvas, no need to smooth over the DOM interaction, either. There are some higher level libraries which make interacting with Canvas easier, such as Easel.js. WebSockets are useful for bi-directional streaming communication. And Box2D is useful for a physics engine. Local Storage is simple key/value string data for things like level progress, but for anything complex, you'll want WebSQL DB. For large binary assets you'll want to look at the File System API. Finally, don't be afraid of WebGL, as it is extremely fast and useful for 2D games.

3) What is the hardest part?

A: Almost certainly the hardest part is the debugging. WebKit's Developer Tools can make this easier, so don't leave home without them.