Workshop › 15 Puzzle › Step 1 of 27

15 Puzzle: A board in one list

Slide the numbered tiles back into order. Positions in a flat array, neighbours on a grid, why a shuffle must be made of real moves (and the math that proves which puzzles can be solved), and smooth sliding animation.

What we are doing

The 15 puzzle: fifteen numbered tiles and one gap on a 4 by 4 board; slide tiles into the gap until they are in order. The board is kept in one flat array of 16 numbers, read row by row, with 0 for the gap.

```js
let tiles // tiles[position] is the number on that square, 0 for the gap; positions go row by row

function reset() {
  tiles = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 0]
}

reset()
```

What it means

• let tiles makes a variable; the comment says what it holds.
• [1, 2, ..., 15, 0] is an array: an ordered list. tiles[0] is the first item (1), tiles[15] the last (0, the gap).
• reset() puts the board in order. Later it will also shuffle it. The last line calls it.

Your turn

Write the lines under the three comment lines, then press Run.

Skills: Arrays and objects

The canvas and the pen →

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