The memory game (sometimes also called "concentration") involves people taking it in turn to flip over two cards and showing them to everyone. If the two cards match they get to keep them and have another turn. If the cards don't match they put them back face down and the next person has a go. The idea is to remember where the cards previously turned over are so that when you turn over a new card that matches one already turned over that you can match them up. The person with the most cards at the end wins.
To copy this game to use on your own web page involves just four simple steps. First simply copy the following CSS and attach it into the head of your page:
Next place the following HTML where you want the game to appear in your page:
Finally upload your images and update the entries at the end of the script to reference them. You can use whatever images you like with this script as long as you own the right to use them on the web and provided that you resize them all to the same size before you start (the ones shown above are 60 by 60).. You will need one image for the back of the "cards" and eighteen for the "fronts", if you want a related images version then you will need a second set of 18 images that are somehow each related to one of the images in the first set of eighteen. The image for the backs goes in the first parameter and the eighteen images for the fronts are entered as an array via the second parameter. For the related image version enter a third parameter as another array containing the related images in the order where each is related to the image at the corresponding position in the first set of images. Make sure that the image files are as small as possible or the game may take too long to load. If you want a different number of images instead of 18 then you may need to change the value assigned to 'wd' within the script so as to display a different number of images across the page.
This article written by Stephen Chapman, Felgall Pty Ltd.