image.png

Создайте игру на запоминание в React.

Вы начинаете с 6 изображений, которые будете отображать в виде 12 карточек. По умолчанию они "перевернуты" - вместо изображения вы получаете только заполнитель.

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

Вы можете создать игру в виде компонента React, который использует множество изображений.

Вот пример того, как он будет использоваться - вы можете использовать этот массив изображений для тестирования:

<MemoryGame
   images={[
        "<https://images.unsplash.com/photo-1626808642875-0aa545482dfb>",
        "<https://images.unsplash.com/photo-1546842931-886c185b4c8c>",
        "<https://images.unsplash.com/photo-1520763185298-1b434c919102>",
        "<https://images.unsplash.com/photo-1442458017215-285b83f65851>",
        "<https://images.unsplash.com/photo-1496483648148-47c686dc86a8>",
        "<https://images.unsplash.com/photo-1591181520189-abcb0735c65d>",
   ]}
/>

Чтобы перетасовать изображения, вы можете использовать lodash библиотеку, которая имеет метод shuffle (https://www.geeksforgeeks.org/lodash-_-shuffle-method/)

<aside> 📖

Для начала вы можете склонировать стартовый репозиторий (the starter repo).

</aside>

<aside> 🏗️

Готовы проверить свою работу?

Подробный пошаговый гайд вы найдете в разделе ниже.

Руководство: Как создать игру на запоминание

</aside>