Concentration Pastelet Description

What does this pastelet do?

This JavaScript pastelet inserts a game of concentration into a web page that can be played by any Javascript-savvy browser. You can see it in action.

Step One: Get the support file

First, download the support file and place it in the same directory as the page you want to have the game on. It needs to be named "concentration.js".

Step Two: Create the graphics

You will need to create 17 GIF image graphics, all of the same size. First, you need the back side of the card (or whatever you want it to look like before a card is turned over), named card0.gif.

Then, you need eight cards to be used for the pairs. These are named card1.gif, card2.gif, etc.

Finally, you need the winning cards, which cycle between the normal cards and the winning cards to create the endgame celebration. These should be named card1win.gif, card2win.gif, etc.

Place the cards in a folder called "images" in the same folder as the page you want to put the concentration game on.

The code assumes your images are 80 pixels by 80 pixels. If they are not, change the code in concentration.js to match your pixel size.

Step Three: Paste a pastelet

Where you want the game to appear on the page, paste the following:

		<script language="javascript" src="concentration.js"></script>
		

(This includes the concentration.js support file in your page.) Make sure that concentration.js is also in the same folder as the page you want to put the concentration game on.

YOU'RE DONE!

Warning: For Geeks Only

This is an advanced use of Javascript programming. It hinges on the fact that the cards never move, so we can dynamically swap images in and out of the card images on the page. All the code for this is contained in the external file concentration.js.

Arrays are used to make the code efficient. We store all the images of the different cards in an array, as well as the references to the html page locations for the card positions. Finally, we keep track of which card is where in another array, which we use to decide which cards to display at any given time.

We capture mouse clicks on the images, and act accordingly.