随机打乱后如何匹配不同文件源的图像？

Question

这道题用到了jquery。

在下面的纸牌游戏中，一张图像将用于制作 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="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

我会使用 jQuery 的 .data() 方法来“附加”一个与匹配图像所需的“标准”相匹配的特定数据。然后，当您“翻转”一张“卡片”时，您可以提取特定的数据并将其与另一张翻转的卡片进行比较，看看它们是否匹配。因为数据是图像的属性，所以当图像被打乱时，它会随着图像“移动”。