Игра памяти в ванильном JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Марина Феррейра

Узнайте JS, CSS и HTML, создавая игру памяти за 30 минут!

Это руководство объясняет некоторые основные концепции HTML5, CSS3 и JavaScript. Мы обсудим атрибут данных, позиционирование, перспектива, переходы, Flexbox, обработка событий, тайм-ауты и троики. Вы не должны иметь много предварительных знаний в программировании. Если вы знаете, для чего есть HTML, CSS и JS, это более чем достаточно!

? Демо: м Эморийский игровой проект

Структура файла

Давайте начнем создавать файлы в терминале:

? mkdir memory-game ? cd memory-game ? touch index.html styles.css scripts.js ? mkdir img

HTML

Начальный шаблон, связывающий оба CSS. а также js. файлы.

Игра имеет 12 карт. Каждая карта состоит из контейнера девочка название .карта памяти , который держит два IMG элементы. Первый представляет собой карту передняя сторона а второй его обратная сторона .

Вы можете скачать активы для этого проекта по адресу: Репо памяти игра .

Набор карт будет завернут в раздел Контейнерный элемент. Конечный результат:

CSS.

Мы будем использовать простой, но все же очень полезный сброс, примененный ко всем предметам:

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

Установив отображать: сгибаться к тому тело а также Маржа: Авто к тому .игра на запоминание Контейнер, он будет центрирован как вертикально, так и горизонтально.

.игра на запоминание Также будет a Flex-Container . По умолчанию элементы установлены на ширину ширины, чтобы соответствовать контейнеру. Установив Flex-Wrap к сворачивать , Смерковые предметы Переверните вдоль нескольких линий, соответственно их размера.

Каждая карта ширина а также рост рассчитывается с Calc () CSS функция. Давайте сделаем три строки, четыре карты каждый по настройке ширина к 25% а также рост к 33.333% минус 10px. из прибыль .

Для позиции .карта памяти дети, давайте добавим Должность: родственник Таким образом, мы можем позиционировать детей абсолютно, относительно него.

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

Шаблон должен выглядеть так:

Давайте также добавим эффект клика. То : активный Pseudo Class будет срабатываться каждый раз, когда элемент нажат. Это будет применить переход .2S к его размеру:

Флип-карта

Чтобы перевернуть карту при нажатии класса кувырок добавляется к элементу. Для этого давайте выберем все карта памяти элементы с Document.QuerySelectorall . Затем петлю через них с для каждого и прикрепите слушатель события. Каждый раз, когда карта нажала флипкарт Функция будет уволена. То это Переменная представляет собой карту, которая нажала. Функция обращается к элементу классный список и переключает кувырок класс:

В CSS то кувырок Класс вращает карту 180DEG:

Для производства эффекта 3D переворачивается, мы добавим перспектива недвижимость .игра на запоминание . Что свойство настаивает, как далеко в z Самолет объект от пользователя. Чем ниже значение, тем больше эффект перспективы. Для тонкого эффекта давайте подать заявку 1000px. :

К тому .карта памяти элементы давайте добавим Стиль преобразования: PROSERV-3D , Чтобы расположить их в трехмерном пространстве, созданном в родительском, вместо того, чтобы увлечь его до z самолет ( стиль преобразования ).

Теперь переход должен быть применен к преобразовать Свойство для производства эффекта движения:

Итак, мы получили карту к 3D Flip, Yay! Но почему не карт не появляется? Сейчас, оба . Front-Face. а также обращаться сложены друг на друга, потому что они абсолютно расположены. У каждого элемента есть назад лицо , что зеркальное изображение его переднее лицо . Недвижимость видимость на задней поверхности по умолчанию видимый , Поэтому, когда мы переворачиваем карту, то, что мы получаем, это заднее лицо значка JS.

Чтобы раскрыть изображение под ним, давайте подать заявку видимость: скрытый к . Front-Face. а также обращаться .

Если мы обновляем страницу и переверните карту, она ушла!

Поскольку мы спрятали оба изображения обратно лица, на другой стороне ничего нет. Так что теперь мы должны включить . Front-Face. 180 градусов:

И теперь есть желаемый эффект Flip!

Матч-карта

Теперь, когда у нас есть листовые карты, давайте обрабатываем сопоставленную логику.

Когда мы нажимаем на первую карту, она должна подождать, пока другая карта не будет перевернута. Переменные Открыл а также переплетать будет управлять состоянием Flip. В случае, если нет перевернутой карты, Открыл установлен в правда а также переплетать установлено на карту нажатой. Давайте также переключаем переключать метод Добавить :

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

Всякий раз, когда мы хотели бы добавить дополнительную информацию в элементы HTML, мы можем использовать Атрибуты данных . Используя следующий синтаксис: данные-* , куда, * Может быть любое слово, этот атрибут будет вставлен в свойство DataSet элемента. Итак, давайте добавим Data-Framework К каждой карточке:

Итак, теперь мы можем проверить на наличие матча, доступа к обоим наборам данных. Давайте извлечь сопоставленную логику в свой собственный метод Checkformatch () а также установленный Открыл Вернуться к ложе. В случае матча, Disablecards () вызывается, и слушатели событий на обоих картах отсоединяются, чтобы предотвратить дополнительно перевернуть. Иначе, unflipcards () повернут обе карты обратно на 1500 мс, которое удаляет .кувырок класс:

Положить все вместе:

Более элегантный способ написания сопоставления состояния состоит в том, чтобы использовать Темнарный оператор . Он состоит из трех блоков. Первый блок – это условие, которое необходимо оценить. Второй блок выполнен, если условие возвращает true, в противном случае выполненный блок – это третий:

Блокировка доски

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

Давайте объявляем a локальная доска Переменная. Когда игрок нажимает вторую карту, локальная доска будет установлено на правда а также состояние Если (локальная доска) возврата; Предотвратите личную карточку, прежде чем карты будут скрыты или совпадать:

Та же карта клика

То есть тот случай, когда игрок может щелкнуть дважды на одной карте. Соответствие условия оценки будет оцениваться в True, удаляя слушателя события с этой карты.

Чтобы предотвратить это, давайте проверим, будет ли текущая карта нажатия равна первенство и вернуть, если положительный.

То первенство а также вторичная карта Переменные должны быть сброшены после каждого раунда, поэтому давайте извлечь, что на новый метод Restrouddoard () . Давайте разместим то Hasferapsard; а также локальная доска там тоже. ES6. Разрушение назначения [var1, var2] = [«VALUE1», «VALUE2»] позволяет нам сохранить код Super коротко:

Новый метод будет называться как из Disablecards () а также unflipcards () :

Перетаскивание

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

Когда отображать: сгибаться объявлен на контейнере, Смерковые предметы расположены следующей иерархией: группа а также источник порядок. Каждая группа определяется порядок Собственность, которая имеет положительное или отрицательное целое число. По умолчанию, каждый Flex-item. имеет его порядок Свойство установлено в 0 , что означает, что они все принадлежат к той же группе и будут выложены по заказу источника. Если существует более одной группы, элементы сначала расположены по возрастанию группового порядка.

В игре 12 карт, поэтому мы будем проходить через них, генерируем случайное число от 0 до 12 и присваиваем его на элемент Flex порядок имущество:

Для того, чтобы вызвать перерыв функция, давайте сделаем это Сразу вызывало функционирование выражения (IIFE) , что означает, что он будет выполнять себя сразу после его декларации . Сценарии должны выглядеть так:

И это все люди!

Вы также можете найти пояснение видео? C Од эскиз канала.

использованная литература

Первоначально опубликовано marina-ferreira.github.io .

Оригинал: “https://www.freecodecamp.org/news/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae/”