Question

This question uses jquery.

In the card game below, one image will be used to make 2 matching cards. Cards are matched based on having the same file source.(ie if 2 cards have the same file source then they are a match).

What I’d like to do is match the cards based on different criteria. This is because I’d like to use 2 different images as the matching pair.

At first I thought that I could just specify values for the matching images, but when the cards are shuffled at the start/reset of each game, the values don’t move with the image.

To sum up, I’d like to find a way to match 2 cards(images) that have differing file sources after they have been randomly shuffled.

Any help would be much appreciated. Thanks.

    <script type="text/javascript">
    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<children.length; i++) {
            array_img[i] = $("#"+child.attr("id")+" img").attr("src");
            child = child.next();
        }

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

        for (z=0; z<children.length; 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();
        $(".tile").hide();
        $("img").removeClass("opacity");
        count = 0;
        $("#msg").remove();
        $("#count").html("" + count);
        boxopened = "";
        imgopened = "";
        found = 0;
        return false;
    }

    $(document).ready(function() {
        $(".tile").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");
                    //print imgopened
                    $('#reading1').html('<h1> imgopened is '+imgopened+'</h1>'); 

                    setTimeout(function() {
                        $("#boxcard div").bind("click", openCard)
                    }, 300);
                } else {
                    currentopened = $("#"+id+" img").attr("src");
                    //print currentopened 
                    $('#reading2').html('<h1> currentopened is '+currentopened+'</h1>'); 

                    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 The Cards With </span>';
                    $("span.link").prepend(msg);
                }
            }
        }
    });
    </script>

Here is the html

<div id="reading1" style="display:block; width:700px; height:50px;"></div>
<br/>
<div id="reading2" style="color:#cc0000; display:block; width:700px; height:50px;"></div>
    <div id="boxbutton">
        <span class="link">
            <span id="count">0</span>
            Click
        </span>
        &nbsp;
        <a href="javascript:" class="link" onclick="resetGame();">Restart</a>
    </div>
    <div id="boxcard">
        <div id="card1"><img class="tile" src="img/01.jpg" /></div>

        <div id="card10"><img class="tile" src="img/01.jpg" /></div>
    </div>

Answer 1

I would use the .data() method of jQuery to “attach” a specific piece of data that matches the “criteria” you need for the matched images. Then as you “turn over” a “card” you can extract the specific piece of data and compare it to another card that is turned over to see if they match. Because the data is a property of the image, it will “move” with the image when it is shuffled.