Как я могу сопоставить изображения разных файловых источников после случайного перемешивания? - PullRequest
Новая
       22

Как я могу сопоставить изображения разных файловых источников после случайного перемешивания?

0 голосов
/ 01 сентября 2011

В этом вопросе используется 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>

1 Ответ

0 голосов
/ 01 сентября 2011

Я бы использовал метод jQuery .data(), чтобы «прикрепить» конкретный фрагмент данных, который соответствует «критериям», необходимым для сопоставляемых изображений.Затем, когда вы «переворачиваете» «карту», ​​вы можете извлечь конкретный фрагмент данных и сравнить его с другой картой, которая перевернулась, чтобы увидеть, совпадают ли они.Поскольку данные являются свойством изображения, они будут перемещаться вместе с изображением при перетасовке.

...