Build a Memory (flip-card) Game

Question

Accepted Answer

## Building a Memory (Flip-card) Game in React

**Mental model:** Cards are a shuffled array of paired symbols. Track which indices are *flipped* (currently face-up, max two) and which are *matched* (permanently up). On the second flip, compare: match keeps them; mismatch flips both back after a short delay. Lock input during that delay so a third card can't be flipped.

### Step 1 — Build a shuffled, paired deck
```jsx
const deck = useMemo(() => shuffle([...symbols, ...symbols].map((s, i) => ({ id: i, s }))), []);
```

### Step 2 — Flipped + matched state
```jsx
const [flipped, setFlipped] = useState([]); // indices, length 0..2
const [matched, setMatched] = useState(new Set());
```

### Step 3 — Flip logic with a lock
Ignore clicks on locked board, already-flipped, or matched cards.

```jsx
const flip = (i) => {
  if (lock || flipped.includes(i) || matched.has(i.id)) return;
  const next = [...flipped, i];
  setFlipped(next);
  if (next.length === 2) resolve(next);
};
```

### Step 4

Build a Memory (flip-card) Game

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)