Sobes.tech
Back to tasks
Junior — Middle+
23

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

Get help with live coding in real time with Sobes Copilot
Task condition

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

Требования:

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

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