Question

I’m working on a memory matching game. Right now, the game is working fine. However, I now need to work on the part of the game where you actually have to flip the cards over. I first was going to have two sets of images: the “back of the card” and the “front of the card.” The backs of the cards were all going to be identical and then when you click on one, the front of the card would be revealed. The fronts would all be unique pairs of pictures. However, my code is such that pictures that are clicked on which have the same source would be removed. So once you click on any two of the “backs” of the pictures, they would always be removed, regardless of what their “front” was.

I want to use only one set of pictures and just have them displayed differently when they are clicked. Sorry if that sounds a bit confusing, that’s the best way I can explain it.

Here is a demo of what I have so far: http://jsfiddle.net/GquLr/

So basically, I need a way to incorporate a feature where you have to flip two cards over and if they match, they are removed and if they don’t match, they flip back over.

Answer 1

With displaying both a front and back side of the cards, every card is essentially two images overlayed on top of each other. You can use CSS 3 to flip the back side over as well.

The way I see it, you can represent that structure in HTML markup with something like the following:

<div class="card">
    <img class="front" />
    <img class="back" />
</div>

Using that, you can easily target the elements on what needs to be flipped, et al.

On the Javascript side, however, the way you’re thinking, I take it is that you’re assigning the click handler on the front <img/>. I’d suggest you move it to the div.card instead. That way you don’t have to worry about which side of the card gets the click.

From the div.card, you can easily get the source of the front <img/> with something like:

$('div.card').on('click', function () {
    var _src = $(this).find('.front').attr('src');
});

… and use that to compare with the other cards in the display.