Search jQuery

jQuery Forum

Using jQuery

winthropi..

Matching game - change bg color when condition is met

in Using jQuery • 9 years ago

The problem follows the code: Matching Game

Click two different cards to see if they match!

salmon
swordfish
swordfish
shrimp
lobster
scallops
lobster
salmon
tuna
scallops
tuna
shrimp

I'm writing a basic memory game where you flip 2 cards and if they don't match, they flip back over, but if they do match their background color changes. All of the flipping is done on click; it adds a class of flipped. Right now nothing happens when a match is made; the cards just stay there keeping the flipped class. How can I make it so the bg color changes on a match? Also, I want a button that can reset the game back to all blank cards at any time.How would I do this?

Replies(7)

jakecigar

Re: Matching game - change bg color when condition is met

9 years ago

By flipping, I assume some CSS3 animation. Right?

You need to watch for the transitionend webkitTransitionEnd events. If you share your code, we can assist you further.

JΛ̊KE

watusiware

Re: Matching game - change bg color when condition is met

9 years ago

The same way you've handled flipped cards.

When there is a match, add a CSS class of matched to the card.

Now, you can write CSS to style flipped or matched cards any why you'd like. You can use a CSS animation to perform the flip, but I gather you already realize that.

To reset, just:

$('.flipped, .matched').removeClass('flipped matched');

winthropi..

Re: Matching game - change bg color when condition is met

9 years ago

@jakecigar @watusware,

I posted the code on the original post but it certainly didn't make it through! Here it is.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Matching Game</title>

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: futura;
}
h2 {
    text-align: center;
}
ul {
    width: 428px;
    margin: 0 auto;
    padding: 0;
}
ul li {
    float: left;
    width: 100px;
    border: 1px solid #444;
    list-style: none;
    padding: 70px 0;
    margin: 0 5px 5px 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 1em;
}
ul li:hover {
    border: 1px solid red;
}
ul li.flipped {
    color: #444;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></
script>
</head>
<body>

<h2>Click two different cards to see if they match!</h2>
<ul>
    <li>salmon</li>
    <li>swordfish</li>
    <li>swordfish</li>
    <li>shrimp</li>
    <li>lobster</li>
    <li>scallops</li>
    <li>lobster</li>
    <li>salmon</li>
    <li>tuna</li>
    <li>scallops</li>
    <li>tuna</li>
    <li>shrimp</li>
</ul>

<script type="text/javascript">

$(function() {
    var firstCard = null;

    $('li').on('click', function(e) {
        e.preventDefault();

        $(this).addClass('flipped');

        if (firstCard === null) {
            firstCard = $(this);
        } else {
            if (firstCard.text() === $(this).text()) {
                firstCard = null;
            } else {
                var secondCard = this;

                setTimeout(function() {
                    firstCard.removeClass('flipped');
                    $(secondCard).removeClass('flipped');

                    firstCard = null;
                }, 1000);
            }
        }
    });
});
</script>
</body>
</html>