Workshop › Wordle-style Word Guess › Step 5 of 26

Six rows

What we are doing

There are six tries, so six rows. A second loop around the first repeats the whole row, each one SIZE + GAP lower.

```js
const TRIES = 6

  for (let row = 0; row < TRIES; row++) {
    for (let i = 0; i < 5; i++) {
      const x = LEFT + i * (SIZE + GAP)
      const y = TOP + row * (SIZE + GAP)
      ctx.strokeStyle = '#3f3f46'
      ctx.lineWidth = 2
      ctx.strokeRect(x + 1, y + 1, SIZE - 2, SIZE - 2)
    }
  }
```

What it means

• TRIES is the number of guesses.
• The outer loop runs once per row; for each row, the inner loop draws five tiles. 6 × 5 = 30 tiles.
• y moves down SIZE + GAP pixels per row.

Your turn

1. Above const SIZE, write const TRIES = 6.
2. In draw, wrap the loop in the row loop, and change const y = TOP to use row. Press Run.

Skills: Loops

← A row of five tiles Draw again and again →

All steps

1. The canvas and the pen
2. Paint the background
3. A function that draws
4. A row of five tiles
5. Six rows
6. Draw again and again
7. The typed letters
8. Type with the keyboard
9. Show the letters
10. Backspace
11. Leave shortcuts alone
12. A secret word
13. Right letter, right place
14. Right letter, wrong place
15. Enter sends the guess
16. Colour the guesses
17. Winning and losing
18. A message line
19. Where the keys go
20. Draw the keyboard
21. Tap a key
22. Enter and Delete keys
23. Keys that remember
24. Keep statistics
25. Show the statistics
26. Build it yourself: only real words