Workshop › Tic-tac-toe › Step 9 of 33

From cell number to position

What we are doing

The board array numbers the cells 0 to 8. To draw a mark we need the cell's center in pixels. Two small formulas turn a cell number into a column and a row.

```js
const index = 7
const x = (index % 3) * CELL + CELL / 2
const y = Math.floor(index / 3) * CELL + CELL / 2
ctx.fillText('X', x, y)
```

What it means

• % is the remainder: 7 % 3 is 1, so cell 7 is in column 1.
• Math.floor(7 / 3) rounds 2.33 down to 2, so it is in row 2.
• * CELL turns the column or row into pixels, + CELL / 2 moves to the middle of the cell: (150, 250).

Your turn

In draw, replace ctx.fillText('X', 50, 50) with the four new lines. Press Run.

Skills: Arrays and objects

← Write an X Draw what the board holds →

All steps

1. Get the canvas and the pen
2. Paint the board
3. The first grid line
4. Repeat with a loop
5. Finish the grid
6. The board as a list
7. A function that draws
8. Write an X
9. From cell number to position
10. Draw what the board holds
11. A color for each mark
12. Make a move
13. No playing on a taken cell
14. Listen for clicks
15. Which cell was clicked?
16. Clicks on any screen size
17. The eight winning lines
18. Find three in a row
19. Win, draw or go on
20. The round ends
21. Show who won
22. Light up the winning line
23. A function for a fresh round
24. Click to play again
25. A computer that picks a cell
26. The computer answers
27. Rule one: take the center
28. Rule two: win when you can
29. Rule three: block the opponent
30. Score a finished game
31. Look ahead: minimax
32. A computer that never loses
33. Build it yourself: keep score