In my spare time, I blog about Bollywood.
Here's the finished game as posted on my blog:
Besides looking sweet, this game can be played multiple times as the cards are reshuffled each time you replay the game or reload the page.
Creating the game is simple. But you need to do some work beforehand. Here's what I recommend you do before creating your online memory game:
- Create a series of images that will be resized:
- 1 800x600 background image (will be resized)
- 1 200x200 square logo representing your brand or website
- 1 200x200 square card back image
- 10 200x200 square images that will show up when the card if flipped. These images will be resized, so you want close-ups or otherwise easily-identifiable images that are still recognizable when scaled down. You also want to make sure that the images aren't too dark.
- Create a document of text to be used for the memory game:
- Game Filename Title (for saving your work to a unique URL):
- Game Title:
- Game Menu Text (max 110 characters):
- In-Game Text (max 50 characters; optional):
- After Game Text (max 115 characters):
The reason I recommend setting all this up beforehand is that once you create a memory game you don't have the option of editing/updating the files. So, you might find yourself creating more than one game before you get the version you want.
Here are two of my previous versions which didn't work out quite right:
What I didn't like about this one is the white lettering on light gray background. It just doesn't work. The reason I picked the gray background for the graphic initially was because it was an extension of the gray background of the image of Sukhwinder Singh. While I wanted to retain this image of Singh in the left side - a positioning that works - I had to crop the image and Photoshop out the gray background. I also had to increase the size of the image of Sukhwinder because the original graphic is cropped so that his left leg is cut off in the front at the knee. Once those issues were taken care of I could use a background color that was more conducive to displaying the white text. I decided to use a Blue #003F6A.
The other issue was that I wasn't totally satisfied with all the game images. I felt two of them were too dark and one needed to be cropped more appropriately for this medium. So I revised these images as well.
And because I created a document with the text I wanted to use for the game, I was able to easily adjust (as necessary) and cut-and-paste that information into the memory game creator.
This version is much better. I did add a small lens flare to the background, but the game developers add some visual elements as well, so you can go with a plain background color. Also note that you don't need to create a background image - the developers give you a selection of colors to choose from if you don't have a background image; however, a background image allows you to further identify the memory game content.
I still wasn't satisfied with this version because when you play the game, the In Game Text: "Find the matching song pairs" covers our singer's face. Note that the text around Sukhwinder's waist is a little difficult to read as well, but it is still legible and because I like the image so much I decided not to make changes here. But keep this text in mind when you are designing your background image.
Each time you create a game, you are provided with a link, embed code, iframe code and a SWF ZIP file download. For each of the three games I created, I copied all this information into the same document I was using for the game configuration and downloaded the SWF ZIP file. Note that while you can use the SWF ZIP file download to host the content on your site, when developers update the site the revisions won't carry-over to your file. Also, this ZIP uses the same name each time you save so you should be sure to revise the filename, associating it with the version created.