Sobes.tech
Назад к задачам
Junior — Middle+
24

React‑карточная игра с угадыванием

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Создайте интерфейс из шести карточек с различными данными, размещенных в нижней части страницы. В центре экрана должна находиться отдельная карточка, содержимое которой скрыто. Пользователь должен определить, какие из шести нижних карточек соответствуют скрытым данным в центральной карточке, сделав клик по одной из нижних карточек. При правильном выборе начисляется 20 баллов и игра продолжается, при ошибке текущий счёт обнуляется.

Требования:

  • Реализовать компонент(ы) на React.
  • Шесть карточек с уникальными данными должны располагаться внизу.
  • Центральная карточка отображает только «загадку» без раскрытия данных.
  • По клику на любую из нижних карточек происходит проверка совпадения с данными центральной.
  • При совпадении: увеличить счёт на 20 и сгенерировать новый набор данных.
  • При несовпадении: сбросить счёт до 0.
  • Обновлять состояние без перезагрузки страницы.

Можно использовать любые подходы к управлению состоянием (useState, useReducer, Context и т.п.), но сохраняйте чистоту компонентов и разделение логики от представления.