Workshop › 15 Puzzle › Step 6 of 27

Where each square is

What we are doing

A square is 90 pixels with a 6-pixel gap between squares. squareX(i) and squareY(i) give the top-left corner of square i, with the board centered and a strip left at the top for text.

```js
const SIZE = 90
const GAP = 6
const LEFT = (canvas.width - N * SIZE - (N - 1) * GAP) / 2
const TOP = 60

function squareX(i) {
  return LEFT + colOf(i) * (SIZE + GAP)
}
function squareY(i) {
  return TOP + rowOf(i) * (SIZE + GAP)
}
```

What it means

• The board is 4 × 90 + 3 × 6 = 378 pixels wide; LEFT is half of what is left of the 400: 11.
• Each column is SIZE + GAP = 96 pixels further to the right, each row 96 pixels further down.
• return gives the result back.

Your turn

1. Under the N line, write the four size lines.
2. Above function draw() {, write squareX and squareY and leave an empty line. Press Run.

Skills: Drawing on a canvas, Functions

← Row and column Draw one tile →

All steps

1. A board in one list
2. The canvas and the pen
3. Paint the table
4. A function that draws
5. Row and column
6. Where each square is
7. Draw one tile
8. The number on the tile
9. All the tiles
10. Draw again and again
11. The solved board from N
12. Neighbours
13. Slide a tile
14. Click a tile
15. Arrow keys
16. Count the moves
17. Shuffle with real slides
18. Which boards can be solved?
19. Is it solved?
20. Remember the slide
21. Count the frames
22. Smooth sliding
23. Solved!
24. Show the win
25. Play again
26. A record to beat
27. Build it yourself: a timer