TJ Holowaychuk

Game prototyping with JavaScript & CSS3

I wanted to share a quick few-hour game prototype to hopefully inspire a few people! The industry let-alone browser-based games seem very lacking in imagination and storytelling, or maybe I’m just not looking hard enough ;) but I miss games like Grim Fandango.

Below is a screenshot of the demo, consisting of several DOM nodes to represent parts of the main character, the birds, and the scene. Most of the animation is performed with CSS transitions / animations, some of which are dynamic and use the move.js library.

I have yet to profile anything but it runs quite smooth on my machine, and there are many aspects that could be optimized, and some simple ones like ditching jQuery.

iPhone gaming

Back to the original plan, roughly two years ago before the Ipad came out, I was writing an Objective-C iPhone game with Cocos2d and Chipmunk physics, two really wicked libraries. The iPhone seemed too small, and at the time the resolution was not great either, not to mention the image size restraints that Apple enforced, so I gave up after a few prototypes, and one full-screen PC prototype.

Browser gaming

With the advent of modern browsers, browser gaming is already a lot less shitty than a year or two ago, and it’s only about to get much better with all the work browser vendors are putting into making sure canvas and friends run smooth as butter.

The first prototype I wrote was written entirely with Canvas. One of the main benefits of this is a certain level of control that you obtain, it’s extremely easy to implement features like pausing, to apply post-processing, or ad-hoc features that are difficult with the DOM.

At first I was pretty happy with the result, until I wrote the prototype using CSS3 and HTML, the performance impact was pretty significant (though I had not implemented dirty rects etc). Certain aspects of gaming are significantly easier using the DOM, for example leveraging z-index and CSS transitions, however contrasting canvas pausing and post-processing are more of a problem. At least with the currently state of browser technologies, it’s a good idea to mix and match. You can build a large portion of your game using the DOM, and canvas for aspects like particle emitters, or perhaps even WebGL shaders like this awesome demo.

Demo

The video below shows off some of the interactivity, as well as the tiny scene building tool.

The demo consists of ~200 lines of js and ~200 lines of CSS, using CSS for transformations, animations and obviously for styling, while the js performs some basic interactions like the eye-ball targeting, and randomized cat walk routine. The demo also has a small toolkit for creating scenes, but it’s certainly nothing robust.