Memory Game - Games

This is a memory game with nice cat pictures. You can choose between 10 speed levels (0=slowest 9=fastest). The highscore will be saved as a cookie or in a file on webserver (PHP Script).

We have tested the code in IE 8.0, Firefox 3.5.2, Opera 9.64, Netscape 9.0.0.6 and Safari Public Beta 4(528.16). This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in both the <HEAD> (No reconfigurations needed) and <BODY> sections of your document. It makes use of an onLoad event handler inserted directly into the <BODY> tag and an external .js file.

If you need a little refresher on howto add the onload event handler directly into the <BODY> tag, see the below examples:

Default <BODY> Tag ~ No onLoad event handler

Reconfigured <BODY> Tag ~ onLoad Event Handler Inserted

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Whichever above method (external.js or Traditional Cut/Copy and Paste) of adding a section of code into the <HEAD> section you select to use, there are "No" reconfigurations to be made in this section of code.

After you have inserted the onload event handler you need to save and upload the .js file and the thirty seven (37)* into your directory.

* Since there are thirty seven (37) graphics and the script is configured for you to upload the graphics into your /images directory, (see below a small section of the code) we sugest you doing that instead of reconfiguring the image path thirty seven (37) times in the <BODY> section of code.

</tr>
<tr>
<td><a href="javascript:showCard(12)"><img name="card13" src="images/card.jpg" width="85" height="75" border="0" alt=""></a></td>
<td><a href="javascript:showCard(13)"><img name="card14" src="images/card.jpg" width="85" height="75" border="0" alt=""></a></td>
<td><a href="javascript:showCard(14)"><img name="card15" src="images/card.jpg" width="85" height="75" border="0" alt=""></a></td>
<td><a href="javascript:showCard(15)"><img name="card16" src="images/card.jpg" width="85" height="75" border="0" alt=""></a></td>

Once all the uploading has been done, you need to paste a sniplet of code into the <HEAD> section to call the memory.js file if you have opted to use this method.

The last thing you need to do is insert the <BODY> section of code anywhere in your document you want it to appear.

YOu do not have to keep the default pictures of the cats if you would prefer other images. If you use other images, they need to be 85 x 75 pixels to keep the uniformity of everything.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link* and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ] [ Scripts In Conflict ]

For your Information: * Since the original script site does not offer the .js file required or advises you of all the graphics you need to save and upload, we are archiving this material for your convenience. If you would grab the below link, it will send you to a page where you can get the required .js file and all the graphics(in a zip file)
[ .JS File & Graphics ]