I would like to share a prototype of game that is created just in a few hours. I hope that it will inspire some of you! In the industry of single-player browser-based games, it seems that there is not enough imagination and the ability to tell the stories, perhaps I just have not seen such games ;), but I miss these games like Grim Fandango.

Below is given a screenshot of the demonstration that consists of the multiple nodes of DOM, which represents the component parts of the protagonist, birds, and the scene. Most of the animations are done by CSS transitions / animations, some of which are dynamic and use the library move.js.



I have not yet engaged in profiling of anything, but this demonstration is working without a break rather smoothly, and there are many aspects that can be optimized, starting with simply dumping jQuery.

Game for the iPhone

I am returning to the original plan of the game. About a couple of years before the iPad came, I wrote a game in Objective-C for iPhone using Cocos2d, the engine of Chipmunk and a pair of libraries. iPhone seemed too small and the resolution was not large enough, as well as the restrictions on the size of the images that are dictated by Apple, so I gave up after several prototypes, including one prototype to full-screen PC.

Game in a browser

Since the modern browsers appeared at the market, a game has become worse in the browser than a few years ago, and it is about to become even better due to the ongoing work of the browser developers to speed up an operation of Canvas and other API to the limit.

The first prototype that I wrote, it was created exclusively using the Canvas. One major advantage is a definite level of control that makes it very easy to implement resources such as setting a pause, use of post-processing or special operations, which are difficult to perform using DOM.

At first, I was very pleased with the result until I have written a prototype using CSS3 and HTML; the effect has been quite significant on the performance (though I did not use dirty boxes and other techniques). Some aspects of the game are much easier to implement using DOM, for example: using Z-index and CSS transitions, although, setting the scene for a pause and post-processing have become serious problems. At least using the current browser technology is a good idea to mix and match. You can build most part of your game using DOM and Canvas or maybe even shaders WebGL, as it is in this amazing demonstration.

Demonstration

A part of the interactive features, as well as a tiny tool for building a scene is available in this video: http://www.screenr.com/ZfMs.

The demonstration consists of 200 lines of JavaScript code and 200 lines of CSS; it uses CSS for the transformations, animations, and apparently for the design, while JavaScript is responsible for a basic user interaction, such as tracking eye pupils and the random movement of a cat. The demonstration also includes a tiny tool for creating the scenes, but it is not effective.

Source codes

The source codes are available at GitHub. Let me know, if you create some cool prototypes!

Concepts

Here is a little more of concept art: