Workshop › 15 Puzzle › Step 13 of 27

Slide a tile

What we are doing

move(i) slides the tile at position i into the gap, if it is a neighbour of the gap. Sliding is just swapping the tile and the gap in the list.

```js
// Slide the tile at position i into the gap, if it is next to the gap.
function move(i) {
  const gap = tiles.indexOf(0)
  if (!neighbors(gap).includes(i)) return
  tiles[gap] = tiles[i]
  tiles[i] = 0
}
```

What it means

• tiles.indexOf(0) finds the position of the gap.
• neighbors(gap).includes(i) asks whether i is next to the gap; ! means "not", so a far tile returns at once.
• The tile's number is written into the gap, and its old square becomes the gap.

Your turn

Above function squareX(i), write the comment and move, and leave an empty line. Press Run.

Skills: Game states, Arrays and objects

← Neighbours Click a 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