memory

Игра Memory на jQuery

Сегодня мы создадим простую традиционную игру Memory с помощью jQuery. В этой игре реализация функционала будет только на стороне клиента.

Напомним правила. Игрок наугад открывает пары карточек, если изображение у пары совпадает, то эти карточки остаются раскрытыми. Цель игры — раскрыть все карточки за наименьшее количество кликов.
Реклама: евросвет светильники

Пример Скачать (.zip, 303 Кб)

HTML

В этом примере используются 20 карточек с 10 уникальными изображениями, но в коде, расположенном ниже, мы покажем вам структуру HTML, используя всего 3 изображения, чтобы сократить код. Кроме того, в HTML каркас добавим кнопки сброса, скачивания и перехода к статье, а также, счетчик кликов.

jQuery

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

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

CSS

При раскрытии пары одинаковых изображений, к ним добавляется дополнительное CSS свойство, чтобы выделить уже открытые карточки от открываемых. В данном случае, открытые карточки будут полупрозрачны на 40%.

игра memory


Оставить комментарий