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

Условие

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

Требования:

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

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

Ответ

Храните текущий набор, скрытую цель и счёт. Успех добавляет 20 баллов и создаёт новый раунд, ошибка обнуляет счёт без перезагрузки.

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

function makeRound() {
  const base = Math.floor(Math.random() * 1000) * 6;
  const cards = Array.from({ length: 6 }, (_, index) => base + index);
  return { cards, target: cards[Math.floor(Math.random() * cards.length)] };
}
function CardGame() {
  const [round, setRound] = React.useState(makeRound);
  const [score, setScore] = React.useState(0);
  function choose(value) {
    if (value === round.target) {
      setScore(current => current + 20);
      setRound(makeRound());
    } else setScore(0);
  }
  return <main style={{ minHeight: '100dvh', display: 'flex', flexDirection: 'column' }}>
    <p>Счёт: {score}</p>
    <div style={{ flex: 1, display: 'grid', placeItems: 'center' }} aria-label='Скрытая карточка'>?</div>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
      {round.cards.map(value => <button key={value} onClick={() => choose(value)}>{value}</button>)}
    </div>
  </main>;
}

Если подразумевается логическая загадка, условие должно задавать подсказку, связанную с target. Клиентское скрытие не защищает цель от просмотра в DevTools; для соревновательных наград проверку переносят на сервер.