Назад к задачамПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Middle+
24
React‑карточная игра с угадыванием
Условие задачи
Создайте интерфейс из шести карточек с различными данными, размещенных в нижней части страницы. В центре экрана должна находиться отдельная карточка, содержимое которой скрыто. Пользователь должен определить, какие из шести нижних карточек соответствуют скрытым данным в центральной карточке, сделав клик по одной из нижних карточек. При правильном выборе начисляется 20 баллов и игра продолжается, при ошибке текущий счёт обнуляется.
Требования:
- Реализовать компонент(ы) на React.
- Шесть карточек с уникальными данными должны располагаться внизу.
- Центральная карточка отображает только «загадку» без раскрытия данных.
- По клику на любую из нижних карточек происходит проверка совпадения с данными центральной.
- При совпадении: увеличить счёт на 20 и сгенерировать новый набор данных.
- При несовпадении: сбросить счёт до 0.
- Обновлять состояние без перезагрузки страницы.
Можно использовать любые подходы к управлению состоянием (useState, useReducer, Context и т.п.), но сохраняйте чистоту компонентов и разделение логики от представления.