Workshop › Sudoku › Step 7 of 28

Light up row, column and box

What we are doing

Sudoku's three rules are about the row, the column and the box. We light up all three around the selected cell in grey, which makes the puzzle much easier to read.

```js
// Light up the selected cell's row, column and box, and every cell with the same digit.
const sameBox = Math.floor(r / 3) === Math.floor(selected.r / 3) && Math.floor(c / 3) === Math.floor(selected.c / 3)
let fill = '#ffffff'
if (r === selected.r || c === selected.c || sameBox) fill = '#e2e8f0'
```

What it means

• Math.floor(r / 3) is which band of boxes a row is in (0, 1 or 2); two cells are in the same box when both their row band and column band match.
• The order of the rules matters: later ones overwrite fill, so the selected cell stays blue.

Your turn

In draw, write the comment and sameBox above let fill, and the grey rule under it.

Skills: Game states

← The selected cell The same digit everywhere →

All steps

1. Nine by nine
2. Lines and boxes
3. A puzzle from a string
4. The puzzle's own digits
5. Keep drawing
6. The selected cell
7. Light up row, column and box
8. The same digit everywhere
9. Click to select
10. Move with the arrows
11. Write digits
12. The three rules in one loop
13. Show mistakes
14. Solved!
15. A clock
16. The solved message
17. Play again
18. The easiest cell
19. The solver
20. Random order
21. Invent a puzzle
22. A new puzzle every game
23. Hints
24. Best time
25. N for a new puzzle
26. A number pad
27. Tap the pad
28. Build it yourself: undo