Workshop › 15 Puzzle › Step 5 of 27

Row and column

What we are doing

To draw position i we need its row and column. With N = 4 squares per row, the row is i / N rounded down, and the column is the remainder of that division.

```js
const N = 4 // 4 by 4: tiles 1 to 15 and one gap

const rowOf = (i) => Math.floor(i / N)
const colOf = (i) => i % N
```

What it means

Your turn

  1. Above let tiles, write the N line and leave an empty line.
  2. Under let tiles, leave an empty line and write rowOf and colOf. Press Run.

Skills: Arrays and objects, Functions

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