Memory Game Hang Up

Not the best with javascript, but I am with HTML and CSS. Anyways I have this memory match game I have to figure out, and I have it to a pretty good point. The only issue is when a person makes a successful match, it flips to an image of an X and that is the same for every successful match that is received.
What I am attempting to do is give each match a specific picture that reveals when the user correctly matches. For example a person would make two faces and the image that would stay visible would be a circle and on another match of two faces it would be a square. I hope that is descriptive enough?
Any help is appreciated.


Here is the JS
/*
SlashC jQuery Memory Game plugin
hi@slashc.com, www.slashc.com
*/
(function($)
{
/* plugin methods */
var methods =
{
/* intialization */
init : function(options)
{
/* settings */
var settings =
{
spacing: 10, /* space between items */
columns: 8 /* number of columns */
};

return this.each(function()
{
var self = $(this), data = self.data('data');

if(!data)
{
/* overwrite default settings */
if (options && $.isPlainObject(options)) $.extend(settings, options);

/* get unordered list */
var list = self.find('ul').first();

/* get images data */
var datBack, datMatch, datFigs = [], numFigs, imgEl;
list.find('img').each(function(i)
{
imgEl = $(this);
if (i == 0) { datBack = { src: imgEl.attr('src'), title: imgEl.attr('title') }; }
else if (i == 1) { datMatch = { src: imgEl.attr('src'), title: imgEl.attr('title') }; }
else { datFigs.push({ src: imgEl.attr('src'), id: imgEl.attr('id'), title: imgEl.attr('title') }); }
});
datFigs = datFigs.concat(datFigs);
numFigs = datFigs.length;

/* init data */
self.data('data',
{
target: self,
list: list,
settings: settings,
datBack: datBack,
datMatch: datMatch,
datFigs: datFigs,
numFigs: numFigs,
itmData: null,
busy: false,
events: { init: $.Event('init'), match: $.Event('match'), done: $.Event('done'), reveal: $.Event('reveal'), fail: $.Event('fail') },
stats: { numClicks: 0, time: 0 },
matchCount: 0
});

/* generate items */
methods._generate.call(self, self.data('data'));
}
});
},
/* restart */
restart : function()
{
return this.each(function()
{
var self = $(this), data = self.data('data');
if(data) methods._generate.call(self, data);
});
},
/* get statistics */
getStats : function(options)
{
var i = options ? $.extend({ index: 0 }, options).index : 0;
var stats = { numClicks: 0, time: 0 };
this.each(function(j)
{
if (i == j)
{
var self = $(this), data = self.data('data');
if (data) stats = { numClicks: data.stats.numClicks, time: (new Date).getTime() - data.stats.time };
}
});
return stats;
},
/* dispose */
dispose : function()
{
return this.each(function()
{
var self = $(this), data = self.data('data');
if (data)
{
methods._clear.call(self, data);
self.removeData('data');
}
});
},
/* clear all items */
_clear : function(data)
{
/* remove current list items */
var liEl;
data.list.find('li').each(function()
{
liEl = $(this);
methods._disposeItem.call(liEl);
liEl.remove();
});
data.matchCount = data.numFigs * 0.5;
data.stats.numClicks = 0;
},
/* generate items */
_generate : function(data)
{
/* clear current items */
methods._clear.call(this, data);

/* randomize items */
var i = data.numFigs, j, temp;
while (i)
{
j = parseInt(Math.random() * i);
temp = data.datFigs[--i];
data.datFigs[i] = data.datFigs[j];
data.datFigs[j] = temp;
}

/* display items */
i = data.numFigs;
var prefix = '<img style="position:absolute;top:0;left:0; " ';
while (i--)
{
data.list.append('<li>' +
prefix + 'src="' + data.datMatch.src + '" title="' + data.datMatch.title + '" />' +
prefix + 'src="' + data.datFigs[i].src + '" id="' + data.datFigs[i].id + '" title="' + data.datFigs[i].title + '" />' +
prefix + 'src="' + data.datBack.src + '" title="' + data.datBack.title + '" />' +
'</li>');
}
var item, listW = 0, listH = 0, offsetX, offsetY, itemW, itemH, cols = data.settings.columns;
i = j = 0;
data.list.find('li').each(function()
{
item = $(this).css('float', 'none').css('position', 'absolute');
if (i == cols) { i = 0; j++; }
itemW = item.outerWidth();
itemH = item.outerHeight();
offsetX = i * (itemW + data.settings.spacing);
offsetY = j * (itemH + data.settings.spacing);
item.css('left', offsetX).css('top', offsetY);
listW = Math.max(listW, offsetX + itemW);
listH = Math.max(listH, offsetY + itemH);
methods._initItem.call(item, itemW, itemH, data);
i++;
});
data.list.css('width', listW).css('height', listH);
data.stats.time = (new Date).getTime();
this.trigger(data.events.init);
},
/* init item */
_initItem : function(w, h, gameData)
{
var data = this.data('data');
if (!data)
{
/* get item images */
var imgMatch, imgFig, imgBack;
this.find('img').each(function(i)
{
if (i == 0) imgMatch = $(this);
else if (i == 1) imgFig = $(this);
else if (i == 2) imgBack = $(this);
});

/* init item data */
this.data('data',
{
w: w, h: h,
target: this,
game: gameData.target,
gameData: gameData,
imgMatch: imgMatch,
imgFig: imgFig,
imgBack: imgBack,
matched: false,
busy: false,
id: imgFig.attr('id')
});
imgFig.removeAttr('id');
this.css('cursor', 'default');
imgBack.css('cursor', 'pointer');

/* listen to mouse down */
this.bind('mousedown.slashcMemoryGame', $.proxy(methods._onItemMouseDown, this));
}
},
/* dispose of item */
_disposeItem : function()
{
var data = this.data('data');
if (data)
{
if (data.gameData.itmData) data.gameData.itmData = null;
this.unbind('mousedown.slashcMemoryGame');
this.removeData('data');
}
},
/* on item mouse down */
_onItemMouseDown : function(e)
{
var data = this.data('data');
if (data && !data.matched && !data.busy)
{
if (!data.gameData.busy)
{
data.gameData.stats.numClicks++;
data.busy = true;

if (data.gameData.itmData == null) data.gameData.itmData = data;
else data.gameData.busy = true;

data.imgBack.animate({ top: -data.h, left: 0 }, 'fast', $.proxy(function()
{
var data = this.data('data');
if (data != data.gameData.itmData)
{
if (data.gameData.itmData.id == data.id)
{
data.matched = data.gameData.itmData.matched = true;
data.imgFig.fadeOut('fast');
data.gameData.itmData.imgFig.fadeOut('fast');
data.gameData.matchCount --;
data.gameData.events.match.id = data.id;
data.game.trigger(data.gameData.events.match);
}
else
{
data.imgBack.delay(250).animate({ top: 0, left: 0 }, 'slow',
$.proxy(function() { this.busy = false; }, data));
data.gameData.itmData.imgBack.delay(250).animate({ top: 0, left: 0 }, 'slow',
$.proxy(function() { this.busy = false; }, data.gameData.itmData));
data.gameData.events.fail.id = data.id;
data.game.trigger(data.gameData.events.fail);
}
data.gameData.busy = false;
data.gameData.itmData = null;
if (data.gameData.matchCount == 0)
{
data.game.trigger(data.gameData.events.done);
}
}

}, this));
data.gameData.events.reveal.id = data.id;
data.game.trigger(data.gameData.events.reveal);
}
}
e.preventDefault();
}
};

/* Memory game plugin */
$.fn.slashcMemoryGame = function(p1, p2)
{
/* p1 - method name, p2 - method options */
/* p1 - options for init method, p2 - undefined */
if (p2 == undefined)
{
if (p1 == undefined) return methods.init.call(this);
else if (methods[p1]) return methods[p1].call(this);
else if ($.isPlainObject(p1)) return methods.init.call(this, p1);
}
else if (methods[p1])
{
if ($.isPlainObject(p2)) return methods[p1].call(this, p2);
else return methods[p1].call(this);
}
return this;
};

/* Attach plugin */
$(document).ready(function()
{
$('div.slashc-memory-game').slashcMemoryGame();
});

})(jQuery);


Here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Memory Game</title>
<!-- this demo page style -->
<style type="text/css">




html {
background: url(img/BST_GUESSWHO-background.png) no-repeat center top;
background-color: #050a0d;
background-size: 100%;
min-width:400px;

}




body, html
{
margin:0;
padding:0;

font: 13px "Lucida Sans Unicode","Lucida Grande",arial,sans-serif;

}
a{color:#669;text-decoration:underline}
div#sample, p#info
{
width:800px;
height: 600px;
margin: 40px auto 20px auto;

padding:30px;





}
p#info { margin: 0 auto 40px auto; }


#logo {
height: 200px;
background: url('img/BST_GUESSWHO-logo.png') no-repeat center top;
background-size: 200px;
overflow: visible;
text-indent: -999em;
}

#logo a {
height: 20px;
}



</style>

<!-- start: INCLUDES -->
<link type="text/css" href="css/slashc.memory-game.css" rel="stylesheet">
<script type="text/javascript" src="js/3rdparty/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/3rdparty/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.slashc.memory-game.js"></script>
<!-- end: INCLUDES -->

</head>
<body>
<div id="sample">

<!-- start: MEMORY GAME -->
<div class="slashc-memory-game">
<ul>
<!-- back image (must be the first item) -->
<li><img title="Click to reveal" src="img/BST_1_GUESSWHO-question.png" /></li>
<!-- match image (must be the second item) -->


<!-- image figures (add as many as you want) -->
<li><img id="ID01" title="Figure 01" src="img/BST_2_GUESSWHO-back.png" /></li>
<li><img id="ID02" title="Figure 02" src="img/BST_2_GUESSWHO-back.png" /></li>
<li><img id="ID03" title="Figure 03" src="img/BST_2_GUESSWHO-back.png" /></li>
<li><img id="ID04" title="Figure 04" src="img/fig04.jpg" /></li>
<li><img id="ID05" title="Figure 05" src="img/fig05.jpg" /></li>
<li><img id="ID06" title="Figure 06" src="img/fig06.jpg" /></li>
<li><img id="ID07" title="Figure 07" src="img/fig07.jpg" /></li>
<li><img id="ID08" title="Figure 08" src="img/fig08.jpg" /></li>
<li><img id="ID09" title="Figure 09" src="img/fig09.jpg" /></li>
<li><img id="ID10" title="Figure 10" src="img/fig10.jpg" /></li>
<li><img id="ID11" title="Figure 11" src="img/fig10.jpg" /></li>
<li><img id="ID12" title="Figure 12" src="img/fig10.jpg" /></li>
<li><img id="ID13" title="Figure 13" src="img/fig10.jpg" /></li>
<li><img id="ID14" title="Figure 14" src="img/fig10.jpg" /></li>
<li><img id="ID15" title="Figure 15" src="img/fig10.jpg" /></li>
<li><img id="ID16" title="Figure 16" src="img/fig10.jpg" /></li>
<li><img id="ID17" title="Figure 17" src="img/fig10.jpg" /></li>
<li><img id="ID18" title="Figure 18" src="img/fig10.jpg" /></li>
<li><img id="ID19" title="Figure 19" src="img/fig10.jpg" /></li>
<li><img id="ID20" title="Figure 20" src="img/fig10.jpg" /></li>
<li><img id="ID20" title="Figure 20" src="img/fig10.jpg" /></li>
</ul>

</div>
<!-- end: MEMORY GAME -->

</div>

<div id="logo">
<a href="http://www.broadstreet.com" alt="">Broadstreet.com</a>
</div>

<!-- for demo purposes we're going to listen when the game is done and display basic statistics -->
<p id="info"><span></span> <a id="play-again" href="#">Play Again</a></p>
<script type="text/javascript">
// this script shows how you can get info about the game
var game = $('div.slashc-memory-game'); // get the game
var info = $('p#info').find('span'); // get the info box
var playAgain = $('a#play-again').css('visibility', 'hidden'); // get the play again link
// format time like hh:mm:ss
var formatTime = function(s)
{
var h = parseInt(s / 3600), m = parseInt((s - h * 3600) / 60); s = s % 60;
return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
}
// listen for game 'done' event
game.bind('done', function(e)
{
// show basic stats
var stats = game.slashcMemoryGame('getStats');
info.html('Success ! Number of clicks : ' + stats.numClicks + ', elapsed time : ' + formatTime(parseInt(stats.time / 1000)) + '.');
playAgain.css('visibility', 'visible'); // show link
});
// play again action
playAgain.click(function(e)
{
playAgain.css('visibility', 'hidden'); // hide link
info.html('Memory Game, click to reveal images'); // reset text
game.slashcMemoryGame('restart'); // restart game
e.preventDefault();
});
</script>


</body>
</html>

I'm a little lost.

Surely you don't have MORE than TWO of the same image/face? The idea is to match pairs, yes?

So why not simply LEAVE the flipped over matching pair *AS IS* on the board? That's what all variations of this game that I've ever seen do (even the one my 2-year-old granddaughter plays on her mom's iPad does it this way).

If you really want to ensure that people understood that the still-displayed images are prior matches, you could simply indicate so by, perhaps, "fading" the images a bit? That is, just change their opacity? Or you could just put a big green border around them. Or or or. Why work harder than that?

Well the way it goes the pictures are the back of peoples heads and my art director wants, when theres a match, them to turn into the front of the person matched.

Yes? That's what I said.

Well the way it goes the pictures are the back of peoples heads and my art director wants, when theres a match, them to turn into the front of the person matched.

The simplest way would be to make each object in your array of cards have two properties - one for the image displaying the back of the person's head and the socond for the image displaying their face. By setting up the array like that you keep the two images correctly associated when you shuffle the array.

Then it becomes a simple image swap of one image for the other when there is a match.

Ahhh...I guess I missed that it's the back and fonts of heads. But then where is the challenge in the game??

I'm missing something: If I see two heads with short blonde hair, it's trivial to flip both of them.

I'm missing something: If I see two heads with short blonde hair, it's trivial to flip both of them.

I read it as the backs of their heads show when you flip the cards to try to match them and that they only swap to show the faces after a match. Presumably they all look the same before you flipp any. Cards with two separate fronts to display in different situations.

Maybe we will never know. But yes, after re-reading his post I think you have it.