Workshop › 15 Puzzle › Step 9 of 27

All the tiles

What we are doing

forEach goes through the board: every number is drawn on its square, except the gap.

```js
tiles.forEach((number, i) => {
  if (number === 0) return
  drawTile(number, squareX(i), squareY(i))
})
```

What it means

• forEach runs the function once per item: number is the tile, i its position.
• if (number === 0) return skips the gap: return ends this turn only.
• Each tile is drawn at the corner of its square.

Your turn

In draw, replace the drawTile(1, ...) line with the forEach block. Press Run.

Skills: Arrays and objects, Loops

← The number on the tile Draw again and again →

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