Мы хотим создать компонент, который принимает массив из 6 изображений и выводит игру на память, отображающую 12 карточек.

Создайте изображения карточек

Первым шагом является создание изображений карточек - учитывая 6 исходных изображений, нам нужно будет удвоить их, чтобы у нас было по 2 на каждое, а затем перетасовать массив:

// given 6 images, generate 12 cards for the game
  const gameImages = shuffle([...images, ...images]);
  return (
    <div>
      {gameImages.map((image) => (
        <img src={image} />
      ))}
    </div>
  );

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

Давайте проверим, работает ли это, обновив страницу и убедившись, что каждый раз мы получаем другую картину.

memory-game-step-1.mp4

Начните с отображения заполнителей

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

Мы можем сохранить индекс текущего перевернутого изображения в состоянии компонента:

const [flippedIndex, setFlippedIndex] = useState(null);
  // given 6 images, generate 12 cards for the game
  const gameImages = shuffle([...images, ...images]);
  return (
    <div>
      {gameImages.map((image, index) =>
        index === flippedIndex ? (
          <img src={image} />
        ) : (
          <div
            className="imagePlaceholder"
            onClick={() => setFlippedIndex(index)}
          ></div>
        )
      )}
    </div>
  );

Это работает, но обратите внимание, что изображения перетасовываются после каждого щелчка! Это не то, чего мы хотим.

Поэтому нам нужно извлечь перетасовку за пределы этого компонента, чтобы предотвратить ее повторную визуализацию.

Давайте создадим ImageBoard компонент, предназначенный только для сетки изображений.

const MemoryGame = ({ images }) => {
  // given 6 images, generate 12 cards for the game
  const gameImages = shuffle([...images, ...images]);
  return <ImageBoard images={gameImages} />;
};

Сохраняйте изображения видимыми при обнаружении совпадения

Когда пользователь щелкает по изображениям, если он каждый раз находит другое, мы снова переворачиваем изображение. Но если он щелкает по одному и тому же изображению дважды, это означает, что у него есть совпадение, и мы можем сохранить изображения видимыми!