^ Back to the Game

About

Anigma is a test of various features that are proposed in CSS3. In particular this was my own way of trying out the new css3-transitions and css3-animations. Anigma was tested on Arora, Safari and Google Chrome. Source code can be found on github css3anigma repository.

Some Easter Eggs features:
Hit the 'e' key to bring up a level editor.
Hit the 'k' key to bring up the debug form including a way to jump to any level you want.

SVG

I hoped to have the game only use svg graphics, but currently there are some painting bugs related to transitions and svg images. Once these are fixed in WebKit I will update the game to point to the svg files rather then the rendered png's.

Credits & License

See: credits

Technical Details

Movement

The cursor and the jewel all have a transition property set on their top and left so when their position is changed via the mouse/keyboard they will slide across the screen. When an action causes the board to change (such as moving a jewel to the left/right) a functions checks to see if anything should fall down one block and if so sets their top property causing a transition.

Removing Jewels

When two jewels of the same type are next to each other the opacity is set to 0 starting a transition. The transition end event is used to actually remove the jewels from the dom allowing other jewels to fall down.

Clock

The countdown clock is a div that starts at the length of the screen and a background color of white. When the level is loaded the transition time is set to the time allowed for the level, the color is then set to red and width of 0 starting the transition. When the transition end event is fired it calls the function to drop the 'Out of time!' dialog.

Score

The score behaves similarly to the clock with a transition set on the width.

Trap

Use two background images with transitions followed by a change in id to a wall on the completion of the transition (via the end event).

Fire & Crumble

While this could have been done with an animated gif easily enough I tried out the CSS3 animations and setup keyframes to move the background offsets to the correct location in the image/sprite.

Other

Several other fun new properties were used including:

• -webkit-background-size - cause the background image to scale to the width of the screen
• -webkit-transform: - rotate the CSS3 logo 90 degres.
• -webkit-border-radius and -webkit-box-shadow on the message box.
• The HTML5 audio tag.

Contact

If you have any questions or feedback feel free to send me an email.