I was experimenting with scripting in SVG and I came up with the idea of writing a simple game to exercise my skills. I'm not a game designer by any stretch of the imagination, so I decided to go with something simple. My little boy was playing various versions of the old memory game Concentration, so I figured I would try it.

The rules are simple.

• Click on two cards to turn them over.
• If the cards do not match, they are turned face down again.
• If the cards do match, they are removed from the board.
• When all cards are removed from the board, the game is over.

This variation was based on shapes and colors to keep the attention of a four-year-old. The game also supports the ability to change the backs of the cards to different colors and patterns.

SVG Concentration

I've finished a first pass at making the Concentration game playable under FireFox 1.5. The only incompatibility I have found at the moment is the last two styles on the Card Styles drop down. These are based on the use of a pattern instead of colors or gradients. I have not been able to get the patterns to show up under FireFox. They do work quite well on ASV and Batik.

In the process, I'm doing some cleanup of the SVG based on what I've learned in the last couple of years.

Recently a friend suggested some changes to the game. (Which shows that it is played by people older than 4.) Based on his suggestions, the game now tracks the number of attempted matches and does not allow you to turn a card back face down. (Thanks, Jason)

While I was in the code, I replaced the lame "You Won" alert with a score when you complete the game. (Remember, I never claimed to be a game designer.)