Как мога да съпоставя изображения от различни файлови източници, след като са разбъркани на случаен принцип?

Този въпрос използва jquery.

В играта с карти по-долу едно изображение ще бъде използвано за направата на 2 съвпадащи карти. Картите се съпоставят въз основа на наличието на един и същ файлов източник (т.е. ако 2 карти имат един и същ файлов източник, тогава те са съвпадение).

Това, което бих искал да направя, е да сравня картите въз основа на различни критерии. Това е така, защото бих искал да използвам 2 различни изображения като съвпадаща двойка.

Първо си помислих, че мога просто да посоча стойности за съвпадащите изображения, но когато картите се разбъркват в началото/нулирането на всяка игра, стойностите не се местят с изображението.

За да обобщя, Бих искал да намеря начин да съпоставя 2 карти (изображения), които имат различни файлови източници, след като са били разбъркани на случаен принцип.

Всяка помощ ще бъде много ценена. Благодаря.

    <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>

Ето 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="/bgjavascript:" 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>