Making Javascript and HTML5 games

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.


Put simply use Canvas for moving lots of stuff around the screen and SVG for prettier, slower, vector graphics.

One of the first things you should do is write a speed test program to see what can be done with Canvas and then play with it.

I wrote a blog post about Canvas & writing HTML5 games

Tags:

Html