Build Connect Four

Question

Build Connect Four

Accepted Answer

## Building Connect Four in React

**Mental model:** A 6×7 grid where a disc dropped into a column falls to the lowest empty row. State is the grid plus the current player. The interesting part is the win check: from every filled cell, scan four directions for a run of four same-colour discs.

### Step 1 — Grid + turn
```jsx
const [grid, setGrid] = useState(() => Array.from({ length: ROWS }, () => Array(COLS).fill(null)));
const [red, setRed] = useState(true);
```

### Step 2 — Drop into a column
Find the lowest empty row in that column.

```jsx
const drop = (col) => {
  for (let r = ROWS - 1; r >= 0; r--) {
    if (!grid[r][col]) { /* place here */ break; }
  }
};
```

### Step 3 — Win check in four directions
For each cell, check right, down, and both diagonals for four in a row.

```jsx
const DIRS = [[0,1],[1,0],[1,1],[1,-1]];
function wins(g, r, c, p) {
  return DIRS.some(([dr, dc]) => {
    let n = 0;
    for (let k = 0; k < 4; k++) { const rr = r+dr*k, cc = c+dc*k; if (g[rr] && g

Build Connect Four

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)