-
201024 Feb
Posted in CSS3 Previews, News
Benjamin Meyer has been busy creating Anigma, an online game designed to showcase some of the functionality in CSS3, particularly CSS3 Transitions and Animations.
Anigma is a simple puzzle game where the player has to remove the jewels from the screen, by moving matching jewels next to each other, and progress through multiple levels of varying difficulty, however the game was designed more as a test of the functionality of CSS3 / HTML5 as apposed to providing a high quality gaming experience, although after playing a couple of levels it can get a little addictive. 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 game works in webkit based browsers, including Safari, Chrome and Arora, as well as recent Firefox nightly builds and Opera beta. The author has also uploaded the source on github and encourages users to fork the code and create their own improved versions of the game.
Whilst Anigma may not be the most exciting game in the world, it is an excellent demonstration of the opportunties and possibilities which CSS3 provides.
You can skip to the end and leave a response.
-
Comments
-
01.
Christian says:Comment » February 24th, 2010 at 11:53 am
Great game. very impressive. I got to level 8. :-)
-
02.
Oh I didn’t beat level 8 :(
Anyway, great game; it shows the amazing abilities of CSS3 and HTML5 :) -
03.
Michael says:Comment » February 24th, 2010 at 3:32 pm
Level 8 was hard, but I beat it eventually. ;)
Awesome 8-bit music too.
-
04.
On level 8 make sure to put the white jewel on top of the blocks after moving the blue one.
Easter Egg: You can hit 'k' to bring up a dialog to jump to any level and 'e' to bring up a level editor.
-
05.
-
06.
-
07.
Hello just came across your site and been reading some of your entries and just wondering why you chose a WordPress site dont you find it hard to do anything with? Been thinking about starting one.
-
08.
Brian says:Comment » March 3rd, 2010 at 10:43 pm
Mancala for webOS (as well as a bunch of other webOS games) make great use of CSS3 in far more advanced ways.
-
09.
Emil Ivanov says:Comment » March 3rd, 2010 at 11:53 pm
Very impressive stuff but after lvl 54 I got bored, is this endless…
-
10.
Starting at level 60 there are new blocks, crumbling, trap doors, and fire.
-
11.
-
12.
-
13.
-
14.
Kakakatt says:Comment » March 12th, 2010 at 6:39 pm
When I disable Javascript. It ‘s not working … :|
-
15.
-
16.
Next time, don’t let us skip to the end pls, we’d prefer a short way.
-
17.
-
18.
-
19.
Luckypouet says:Comment » April 16th, 2010 at 8:39 am
#14 I think that animations are handled by CSS3 but events are still triggered by JavaScript.
The animation seems very smooth, Flash must be frightened q^_^p
-
20.
I am at level 10. But now that I read there is more than 6 level, I go farther!
Aklso check out Torus, made with HTML 5
http://www.benjoffe.com/code/games/torus/ -
21.
-
22.
-
23.
got to level 32 and got bored how many levels did you make?
nice work can see some really good stuff coming from this -
24.
You need to check out the brain tasking stages 75 and above. I actually got to 98 and it just keeps getting better.
-
25.
I guess, this is only the beginning. We will see soon a beautifull CSS3 designs, as well games too
-
26.
It is a great combination of CSS3 and javascript to make this game. Too bad I’m not into games really :)
-
27.
Well done!! I strongly approve of this game! I got to level 36 without opening the level editor or the level skipper!
-
28.
-
29.
And I stop here thinking about how difficult it is to deal with transitions in animation especially in Anigma online game… And I still sit here awe struck in my own thoughts
-
30.
-
31.
-
32.
-
33.
Got to level 9 but it gets harder and harder. Interesting game tho!
-
34.
-
01.