Table of Contents

I. Usage

The files are ready to go out of the box. All you'll need to do is upload it and it will work.

You XML needs to be on the same server.

When designing your game your cards should be able to form a solid grid AND must be an even number. For example: 4x4 (8 matches/16 cards), 6x3 (9 matches/18 cards), 5x5 (10 matches/20 cards), 6x4 (12 matches/24 cards). Remember that you will double the cards because each of them will have a match.

Your background image should be the same size of your cards will be when they are placed. For example, a 4x4 grid where the cards are 100px wide and tall, will have a background picture that is 400px wide and 400px tall.

You must keep/include the formatting of the <div> structure that comes with the original file.
   <div class="memory"></div>

II. The XML

The XML has the following options you'll need to customize:

columns

How many columns does your game have?

usebg

["true" or "false"]

Whether or not you want a bg img

bg

The path of the image underneath your cards.

front

The path of the image for the front of the card. This is what your "deck" would look like.

cardH

The height of one of your cards.

cardW

The width of one of your cards.

totalpairs

Determines how many pairs of cards to use in the game. For example, you can have a pool of 15 pairs and only display 10 pairs. The game will choose new pairs at random for every game!

revealspeed

The speed of the reveal flip.

hidespeed

The speed of the flip back.

fadespeed

The speed at which a matching set fades away.

incorrecthold

The speed a wrong match is held before it flips back.

correcthold

The speed a correct match is held before it fades.

endscreendelay

The delay after the last match before revealing your score.

endscreenfade

The speed at which the score fades in.

showtitle

["true" or "false"]

Whether or not you want to use a title above your game.

gametitle

The text to use in the title.

usetimer

["true" or "false"]

Master boolean that determines if the timer is initiated at all.

showtimer

["true" or "false"]

Whether or not you want to show the timer above your game. Setting this to true automatically sets 'showtitle' to true.

showpeek

["true" or "false"]

Give a peak of all the cards at the start of the game.

peekspeed

Set the speed of initial peek.

scoresystem

["time" or "flip"]

What you use to judge the score .

displayscore

["time" or "flip" or "both"]

Which score you show in the end screen.

attemptscolor

The color of attempts/timer in end screen.


Each card node has two attributes.

cardA

The first card in the matched pair.

cardB

The second card in the matched pair.

You can have two different (but related) images paired as a match.


Editing the End Screen

skills

This is an array of the words to represent the success of the player. The words need to be separated by a comma. The first word always represents a perfect score. You can add as many as you like.

skillInc

If 'scoresystem' is set to 'flip', this number represents how many attempts the user has to take to drop down a skill level, starting from a perfect game.

If 'scoresystem' is set to 'time', it represents the total seconds in between each score level.

lineTwo

["attempts" or "solo"]

Choosing "attempts" will trace out how many tries the user took to solve the puzzle and activates the two nodes lineTwoPre and lineTwoPost below.

Choosing "solo" allows you to write in any line you choose and activates the node lineTwoSolo below.

lineTwoPre

This is the bit of text that come before the actual attempt number. For example: You completed the game in 8 attempts.

lineTwoPost

This is the bit of text that come before the actual attempt number. For example: You completed the game in 8 attempts.

lineTwoSolo

This is a single line of copy.

lineThree

["replay" or "link"]

Choosing "replay" will create a button that will start the game over. This option activates lineThreeReplay below.

Choosing "link" will create a button that will click through to another url. This option activates lineThreeLink below.

lineThreeReplay

This is the text for the replay button.

lineThreeLink

This is for your link url and copy. Be sure to format it in html:<a href="http://www.google.com" target="blank">Google</a>

You can leave out either line two OR line three and maintain the formatting.
You still have to choose a setting in the xml, but simply leave the corresponding node blank and the line will be omitted.
To leave out line two, you should select "solo". To leave out line three, you should select "link."

III. CSS Animations

CSS animations are not supported in all browsers. To determine if they can be used these files use modernizr.js. The animations will fall back gracefully in older browsers (IE8).

If you want to adjust the look and feel of the 3D transitions, it can be done completely in the memory.css file by adjusting the 'perspective' value and the 'transition' value. Search the files for these words to see where you should edit them. There are three instances of each.

IV. Different Languages

The only copy in this file appears in the end screen after the game is over. Use the XML nodes (outlined above), to format the messaging.

V. What's Included?

This package comes with the following files:

  • index.html - the html file that is a working example
  • memory.xml - the xml file of the working example
  • images - a folder of the example's images
  • memory.css - the style sheet for the game elements
  • memory.js - the memory game js file
  • memory-min.js - the minimized memory game js file
  • modernizr.js - used to determine css transition support
  • cards.psd - the psd of the cards used in the game
  • documentation - all files and folders associated with this documentation

VI. External Sources

jQuery http:- jquery.com/