Reactで、カードをめくる神経衰弱ゲームを作る方法

export type Card = { id: string; symbol: string };

// 配列を並べ替えた新しい配列を返す（Fisher–Yates のシャッフル）
// rand: 0以上1未満の数を返す関数
export function shuffle<T>(items: T[], rand: () => number = Math.random): T[] {
  const a = [...items];
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

// 絵柄を2枚ずつにして、混ぜたカードの並びを作る
export function createDeck(symbols: string[], rand: () => number = Math.random): Card[] {
  const cards = symbols.flatMap((symbol, i) => [
    { id: `${i}a`, symbol },
    { id: `${i}b`, symbol },
  ]);
  return shuffle(cards, rand);
}

並べ方は 4! = 24 通り。240000回ずつ混ぜた（1通りあたりの期待値 10000）
Fisher–Yates: {"kinds":24,"min":9714,"max":10125,...}
sort(() => Math.random() - 0.5): {"kinds":24,"min":3661,"max":45066,"top":[["ABCD",45066],["DCBA",41147]],...}

import { useRef, useState } from 'react';
import { createDeck, type Card } from './deck';

type Props = { symbols: string[]; delay?: number };

export function MemoryGame({ symbols, delay = 800 }: Props) {
  const [cards, setCards] = useState<Card[]>(() => createDeck(symbols));
  const [open, setOpen] = useState<number[]>([]); // めくっている途中のカード（位置、最大2枚）
  const [matched, setMatched] = useState<string[]>([]); // そろった絵柄
  const [moves, setMoves] = useState(0);
  const [round, setRound] = useState(0);
  const timer = useRef<number | null>(null);

  function clearTimer() {
    if (timer.current !== null) {
      clearTimeout(timer.current);
      timer.current = null;
    }
  }

  function flip(i: number) {
    // 2枚めくっている間、同じカード、そろったカードは受け付けない
    if (open.length === 2 || open.includes(i) || matched.includes(cards[i].symbol)) return;
    if (open.length === 0) {
      setOpen([i]);
      return;
    }
    const first = open[0];
    setMoves((m) => m + 1);
    if (cards[first].symbol === cards[i].symbol) {
      setMatched((m) => [...m, cards[i].symbol]);
      setOpen([]);
    } else {
      // 2枚とも見せてから、少したって裏に戻す
      setOpen([first, i]);
      timer.current = window.setTimeout(() => {
        timer.current = null;
        setOpen([]);
      }, delay);
    }
  }

  function reset() {
    clearTimer();
    setCards(createDeck(symbols));
    setOpen([]);
    setMatched([]);
    setMoves(0);
    setRound((r) => r + 1);
  }

  const cleared = matched.length === symbols.length;

  return (
    <div className="memory">
      <p className="moves">手数：{moves}</p>
      {/* round が変わると、カードを作り直す（前のゲームのカードを使い回さない） */}
      <div className="grid" key={round}>
        {cards.map((card, i) => {
          const done = matched.includes(card.symbol);
          const faceUp = done || open.includes(i);
          return (
            <button
              key={card.id}
              type="button"
              className={`card${faceUp ? ' up' : ''}${done ? ' done' : ''}`}
              onClick={() => flip(i)}
              disabled={done}
              aria-label={faceUp ? card.symbol : `${i + 1}枚目（裏）`}
            >
              <span className="inner">
                <span className="face back" aria-hidden="true">?</span>
                <span className="face front" aria-hidden="true">{card.symbol}</span>
              </span>
            </button>
          );
        })}
      </div>
      <p className="status" role="status">{cleared ? `クリア！ ${moves}手でそろいました` : ''}</p>
      <button type="button" className="reset" onClick={reset}>もう一度</button>
    </div>
  );
}

.grid { display: grid; grid-template-columns: repeat(4, 72px); gap: 8px; }
.card {
  width: 72px; height: 96px; padding: 0; border: none; background: none;
  perspective: 600px; cursor: pointer;
}
.card:disabled { cursor: default; }
.inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.4s;
}
.card.up .inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 8px; backface-visibility: hidden; font-weight: bold;
}
.back { background: #00c8e8; color: #fff; font-size: 28px; }
.front { font-size: 18px; background: #fff; border: 2px solid #00c8e8; color: #1f2a30; transform: rotateY(180deg); }
.card.done .front { background: #eefafd; }
@media (prefers-reduced-motion: reduce) {
  .inner { transition: none; }
}