Workshop › Typing Rain › Step 5 of 33

A list of words

What we are doing

Many words will fall at once. Each word is an object { text, x, y }, and all of them live in an array words. draw writes every word where it is.

```js
let words // { text, x, y }

function reset() {
  words = [
    { text: 'rocket', x: 40, y: 120 },
    { text: 'cat', x: 300, y: 60 },
  ]
}

  for (const w of words) ctx.fillText(w.text, w.x, w.y)

reset()
draw()
```

What it means

• let words makes a variable whose value can change later; reset fills it.
• [ ... ] is an array; each { text, x, y } inside is an object, three named values in one package.
• for (const w of words) runs the line once for each word, calling it w; w.text reads the text inside it.
• reset() sets up the words once, before the first draw().

Your turn

1. Under FONT, after an empty line, write let words and reset.
2. In draw, replace the fillText('rocket', ...) line with the for line.
3. At the bottom, write reset() above draw().

Skills: Arrays and objects

← A function that draws Make them fall →

All steps

1. A sky for the words
2. The ground
3. A word on the canvas
4. A function that draws
5. A list of words
6. Make them fall
7. The game loop
8. A new word from the list
9. Let it rain
10. Gone past the ground
11. Lock on to a word
12. Listen to the keyboard
13. Letter by letter
14. Half a word in yellow
15. Let go of a lost word
16. Lives
17. Hearts
18. Score
19. Out of lives
20. Freeze the game
21. The game over panel
22. Play again
23. Levels
24. Faster and faster
25. Best score
26. Accuracy
27. Words per minute
28. Your speed at the end
29. Where the keys go
30. Draw the keyboard
31. Light up the next key
32. Tap the keys
33. Build it yourself: change your mind