running words around
design education and visual communication
authored by chris m hughes

Back to the Future - CSS3 Gaming

Wednesday, 3 March 2010

Following on from my posts about the possible death of Flash web animations, and the arrival of sketchpad in html5, I see that someone has taken things even further and created an online game written entirely in css3 and html5.

Anigma Screenshot

Anigma is a simple puzzle game, written by Benjamin Meyer, where a player has a grid of squares and must remove jewels from the grid by moving matching jewels next to each other. The player can then progress through multiple levels of varying difficulty. Clearly its going to feel like a huge step back in time in terms of gaming, but after playing a couple of levels, amazingly, it starts to do what good games can - it draws you in.

Throughout the game you will find multiple animations from the clock counting down to the jewels moving around the game board, all handled direcrly by the browser with no 3rd party javascript libraries.

The design serves to showcase the functionality of CSS3 / HTML5 and the new 'canvas' element, specifically the huge strides that have been made in terms of transitions and animation.

The game works in webkit based browsers, including Safari, Chrome and Arora, as well as recent Firefox nightly builds and Opera 10 beta. The author has also uploaded the source on github and encourages users to tweak the code and create their own improved versions of the game. Sounds like a throwback to the early days of computer gaming, before everything went Hollywood.

It won't be long before we are using customised css gaming stylesheets to control interactivity on webpages.