Вступление

React - это библиотека JavaScript, используемая для построения пользовательских интерфейсов. Это интерфейсная библиотека, которую легко и быстро освоить.

В этом уроке мы будем создавать карточную игру Match Up с помощью React.

Обзор игры

Игра состоит из 8 пар карт (т. Е. 16 карт). Карты расположены в случайном порядке и закрыты. Пользователь переворачивает карточку, щелкая по ней. Если две перевернутые карты совпадают, они исчезнут с нашего игрового поля, в противном случае они будут перевернуты. Игра заканчивается, когда все карты совпадают со своими парами.

Предварительное условие

  • Node JS (v6 и выше)
  • NPM (v5.2 и выше)

Пусть начнется кодирование.

Для начала мы должны сначала установить пакеты, необходимые для сборки приложения.

Сначала мы устанавливаем пакет NPM create-react-app. Этот пакет позволяет нам быстро настроить проект ReactJs с помощью всего одной команды.

В терминале или командной строке введите:

npm i create-react-app

Теперь, когда у нас установлен пакет create-react-app, мы можем настроить наш проект.

npx create-react-app card-match-up

Откройте папку проекта card-match-up в любом текстовом редакторе. Я буду использовать VSCode Editor.

Запустите приложение с:

npm start

Приложение должно автоматически открываться в вашем браузере через порт 3000. Интерфейс должен быть похож на этот:

Нам нужно установить еще один пакет NPM для игры.

npm install react-card-flip --save

ReactCardFlip позволяет использовать анимацию переворачивания карты. Я считаю, что это проще использовать, чем писать собственную CSS-анимацию для компонентов карты.

Настройте структуру папки приложения

В папке src создайте две папки:

  1. components папка: в эту папку будут добавлены две папки. Это:
    a. card folder: содержит файлы Card и GameOver JSX
    b. header папка: содержит файл заголовка JSX.
  2. stylesfolder: Куда мы поместим наш собственный файл CSS.

Нам также нужно удалить эти файлы в srcfolder.

  1. App.css
  2. index.css
  3. logo.svg

После создания папок и удаления некоторых файлов наша структура папок должна выглядеть так:

Приложение в настоящее время не работает, потому что мы все еще ссылаемся на некоторые файлы, которые мы удалили. Чтобы решить эту проблему, откройте файлы App.js и index.js и удалите строки, в которые мы импортируем logo.svg, App.css, and index.css.

Настройте файлы приложения

  1. В папке src > components > card создайте файлы Card.jsx и GameOver.jsx.

Напишите следующий фрагмент кода в ваших созданных файлах. Мы скоро их рассмотрим.

Card.jsx

GameOver.jsx

2. В папке src > components > header создайтеHeader.jsx файл. Введите приведенный ниже фрагмент кода в файл Header.jsx.

Header.jsx

3. Замените содержимое App.js в папке src приведенным ниже фрагментом кода.

App.js

4. Наконец, в папке src > styles создайте main.cssfile. Вставьте эти стили внутрь него.

main.css

Прежде чем мы перейдем к приведенным выше строкам кода, давайте убедимся, что наше приложение работает правильно. Запустите приложение с npm start и попробуйте сыграть в игру до конца.

Давайте теперь подробно рассмотрим код.

Прохождение кода

App.js

Этот файл содержит логику приложения. Он также содержит три других компонента React: Header.jsx, GameOver.jsx и Card.jsx.

App.js содержит объект внутреннего состояния и пять различных методов.

Строка 18–22 содержит метод копирования массива номеров карт. Это потому, что у каждого номера карты должен быть дубликат. Метод duplicateCard вернет массив длиной 16, который равен [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7]. Этот массив рандомизируется при передаче в объект состояния shuffledCard.

Строка 24–49 содержит метод переворачивания карты, когда по ней щелкают, чтобы отобразить номер карты. Метод изменяет isFlippedstate карты на true и предотвращает реакцию карты, которая уже перевернута, на событие щелчка. В строке 40 мы проверяем, равно ли количество перевернутых карточек двум, чтобы проверить, совпадают ли эти две карточки.

Строка 51–69 - это метод проверки совпадения двух перевернутых карточек. Этот метод вызывается в строке 46, как показано выше. Метод setTimeout, используемый при установке состояния, заключается в том, чтобы переворот карты не был резким.

Строка 71–79 - это метод restartGame. Этот метод в основном сбрасывает состояние игры.

Строка 81–83 проверяет, окончена ли игра. Если игра окончена, отображается компонент GameOver.

Строка 85–106 Последний блок кода в App.js - это метод рендеринга. В Строке 88 компоненту Header передаются restartGame свойства. Метод isGameOver используется для рендеринга компонента GameOver по окончании игры, в противном случае рендерится компонент Card.

Card.jsx, GameOver.jsx и Header.jsx являются презентационными компонентами. Они не содержат никакой прикладной логики, а содержат реквизиты, переданные им из App.js родительского компонента.

Итак, мы идем! Наша веселая маленькая игра готова.

Спасибо за чтение. Хлопайте, если вам понравилось создавать карточную игру с помощью React.

Следуй за мной в твиттере @ iamkenec