Build the Snake Game

Question

Accepted Answer

## Building the Snake Game in React

**Mental model:** The snake is an array of `{x,y}` cells; the head is index 0. Each tick you prepend a new head in the current direction and pop the tail — unless you ate food, in which case you keep the tail (grow). Direction lives in a `ref` so the keydown handler always reads the latest value (avoiding stale closures), and you reject 180° reversals.

### Step 1 — Snake, direction, food
```jsx
const [snake, setSnake] = useState([{ x: 7, y: 7 }]);
const dir = useRef({ x: 1, y: 0 });
const [food, setFood] = useState({ x: 3, y: 3 });
```

### Step 2 — Tick: move head, grow or shift
```jsx
setSnake((s) => {
  const head = { x: s[0].x + dir.current.x, y: s[0].y + dir.current.y };
  if (hitsWall(head) || hitsSelf(head, s)) { setOver(true); return s; }
  const grew = head.x === food.x && head.y === food.y;
  const next = [head, ...s];
  if (grew) setFood(randomCell()); else next.pop();
  return next;
});
```

### Step 3 — Keyboard with reversal guard
```

Build the Snake 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)