JQuery игра на память

game_pad

Сегодня я хочу создать простую игру на память, с помощью JQuery, большинство людей знают как играть в эту игру, обычно в этой игре используются какие-то карточки, мы должны найти пару каждой карточке, когда мы найдем пару, карточки будут открыты до конца игры.

HTML

Данный пример использует 20 картинок (10 пар), но код снизу показывает только три разные картонки, чтобы сократить код и еще две функции, которые я добавил в пример — «счетчик кликов» и «сброс».

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

JQuery

Для перестановки картинок я использую код из предыдущей статьи про перетасовку изображений, счетчик открытых изображений и кликов юзера готовы, теперь когда кнопку «сброс» нажимают значение счетчика изменится к нулю, отгаданные картинки скроются и функция перетасовки картинок будет вызвана.

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);
            }
        }
    }
});

Когда картинка открывается, я добавил немного времени ожидания, чтобы юзеру было легче запомнить открытую картинку, и я отменил привязку счетчика к событию, чтобы счетчик показывал количество кликов по карточкам, а не по количеству кликов вообще.

CSS

Я добавил стиль непрозрачности(opacity), когда две одинаковые картинки найдены, они буду открытыми и использовать стиль непрозрачности.

#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);
}

Демо|Исходник

Оригинал: Здесь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>