Sign inorRegister Site is for SALE!
Game Development

Prototyping of games using JavaScript and CSS3

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.


A part of the interactive features, as well as a tiny tool for building a scene is available in this video:

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!


Here is a little more of concept art:

KlauS 31 october 2011, 16:24
Vote for this post
Bring it to the Main Page


Leave a Reply

Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute