Tuesday, February 16, 2010

Anigma, a game made using only CSS3 Animations and Transitions

This past week I have been playing around with the new css3 features. I wanted to learn more about the new animations and transitions API. The end results is a fun little puzzle game called Anigma.

Anigma is a simple game. To solve each level you must remove all the jewels. Jewels disappear from the board when they are touching another jewel of the same color. The jewels are stacked on the board so if there is nothing under them they will fall down. This can make the order in which you remove the jewels important on some levels. There are over 500 included levels of various difficulty. If you make it to the end there is a nice little end credits animation (nothing amazing).

All throughout the game you will find animations. From the jewels moving to the clock counting down your time left it is all handled by WebKit and not through a 3rd party javascript library. Using the HTML5 audio tag there are also a dozen 8bit style music tracks to enjoy. Absolutely zero flash is required to play this game, but you will need a WebKit browser (Arora, Chrome and Safari4 are all good). (Updated: Got it somewhat working with the nightly build of Firefox or the latest Opera beta both of which have initial support for transitions.)

I had a lot of fun making the game, but having spent a week on it I decided to wrap it up and release it. A few of the ideas that I have thought about adding to the engine to make interesting levels out of:
  • Elevators (I got this partially working in the js source, but ran out of time)
  • Teleporters
  • Ice blocks
  • Trap doors that would come down after you go under them.
  • Buttons that must have a block in it to activate something such as opening a door
  • Dumb waiter type elevator with two platforms and whichever is 'heavier' will go down and the other up.
  • Loose ceiling piece that falls and can crush a jewel
  • A better 'you finished the level animation'
  • Don't do anything and it will show a level being solved i.e. demo mode
  • Public High score board
  • Use JSON for the level format or something better then the text files.
  • Import the rest of the extra vexed levels
  • Generate a random level
  • 'I give up button' that automatically solves the current level.
  • A snapshot state button so you don't have to restart all the way from the beginning.
  • Sort the levels based upon server logs for difficulty.
While it would be fun to implement many of those features it was really about showing some features of CSS3/HTML5 so having accomplished that I decided to stop. I have posted the source code up on github so you can feel free to fork the code and improve the game.

Hopefully you get a kick out of the game and get some neat ideas for what you can do with the new CSS properties. If you enjoy the game hit the 'e' key to bring up a level editor. If you create something good email it to me and i'll include it.

5 comments:

Denis Dzyubenko said...

that's pretty cool Benjamin! What about re-implementing it with QML? ;)

Benjamin Meyer said...

Can you slap a QWebView in QML? ;)

Denis Dzyubenko said...

you can, but that's cheating!:)

總共多少 said...

TAHNKS FOR YOUR SHARING~~~VERY NICE ........................................

Maura said...

This is really awesome. Thanks for sharing!

Popular Posts