Jquery Memory Game

February 9th, 2011 by aditia rahman / 48 Comments  

     

jquery memory game

Today I want to create a simple traditional memory game based on JQuery this example using only client side scripting, most people already know how to play this game, usually this game using some card, we must find the same card in two sequential time, if we found it the card would opened until we have all the card empty.

View Demo | Download Source

The HTML

This example using 20 images with 10 unique images, but this code below I only shows 3 unique images to shorten the code, and there are another feature I added on this example, like click counter and reset game.

<div id="boxbutton"><span class="link">
 <span id="count">0</span>
 Click
 </span>

 <a class="link" onclick="resetGame();" href="javascript:">Reset</a></div>
<div id="boxcard">
<div id="card1"><img src="img/01.jpg" alt="" /></div>
<div id="card2"><img src="img/02.jpg" alt="" /></div>
<div id="card3"><img src="img/03.jpg" alt="" /></div>
<div id="card11"><img src="img/01.jpg" alt="" /></div>
<div id="card12"><img src="img/02.jpg" alt="" /></div>
<div id="card13"><img src="img/03.jpg" alt="" /></div>
</div>
The JQuery

For shuffling the images I’m using the same code as my previous post about shuffle images, there is counter to how many images have matched and how much click user has done, and when reset button clicked all of this such click counter, image matched counter and shuffling image will be called.

var boxopened = "";
var imgopened = "";
var count = 0;
var found =  0;

function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function shuffle() {
    var children = $("#boxcard").children();
    var child = $("#boxcard div:first-child");

    var array_img = new Array();

    for (i=0; i        array_img[i] = $("#"+child.attr("id")+" img").attr("src");
        child = child.next();
    }

    var child = $("#boxcard div:first-child");

    for (z=0; z        randIndex = randomFromTo(0, array_img.length - 1);

        // set new image
        $("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
        array_img.splice(randIndex, 1);

        child = child.next();
    }
}

function resetGame() {
    shuffle();
    $("img").hide();
    $("img").removeClass("opacity");
    count = 0;
    $("#msg").remove();
    $("#count").html("" + count);
    boxopened = "";
    imgopened = "";
    found = 0;
    return false;
}

$(document).ready(function() {
    $("img").hide();
    $("#boxcard div").click(openCard);

    shuffle();

    function openCard() {

        id = $(this).attr("id");

        if ($("#"+id+" img").is(":hidden")) {
            $("#boxcard div").unbind("click", openCard);

            $("#"+id+" img").slideDown('fast');

            if (imgopened == "") {
                boxopened = id;
                imgopened = $("#"+id+" img").attr("src");
                setTimeout(function() {
                    $("#boxcard div").bind("click", openCard)
                }, 300);
            } else {
                currentopened = $("#"+id+" img").attr("src");
                if (imgopened != currentopened) {
                    // close again
                    setTimeout(function() {
                        $("#"+id+" img").slideUp('fast');
                        $("#"+boxopened+" img").slideUp('fast');
                        boxopened = "";
                        imgopened = "";
                    }, 400);
                } else {
                    // found
                    $("#"+id+" img").addClass("opacity");
                    $("#"+boxopened+" img").addClass("opacity");
                    found++;
                    boxopened = "";
                    imgopened = "";
                }

                setTimeout(function() {
                    $("#boxcard div").bind("click", openCard)
                }, 400);
            }

            count++;
            $("#count").html("" + count);

            if (found == 10) {
                msg = '<span id="msg">Congrats ! You Found All Sushi With </span>';
                $("span.link").prepend(msg);
            }
        }
    }
});

When opening the image, I added some time delay to give a little time for user to remembering the card that has been opened, and I unbind the click event of all the card to prevent abusive click.

The CSS

I added the opacity style, when the two matched images found in the two sequential time, that two image will still opened and with the opacity style.

#boxcard {
    margin: 0 auto;
    width: 625px;
    z-index: 1;
}

#boxcard div {
    float: left;
    width: 100px;
    height: 100px;
    background: #d9d9d9;
    margin: 5px;
    padding: 5px;
    border: 1px solid #999;
    cursor: pointer;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    z-index: 2;
}

#boxcard div img {
    border: none;
    z-index: 3;
}

.opacity {
    opacity: .6;
    filter: alpha(opacity=60);
}

Credit Images: Flickr

View Demo | Download Source

jquery memory game finish

        submit to reddit Delicious

48 Comments Leave a Comment Subscribe RSS

Leave a Comment