Workshop › Typing Rain › Step 8 of 33

A new word from the list

What we are doing

spawn adds a random word from the WORDS list at the top. Its x is random too, but not so far right that the word hangs off the edge: the canvas can measure how wide a text will be.

```js
const WORDS = [
  'cat', 'sun', 'code', 'game', 'jump', 'fast', 'loop', 'byte', 'star', 'tree', 'rain', 'blue', 'fire', 'wind', 'moon',
  'array', 'pixel', 'mouse', 'score', 'level', 'robot', 'light', 'music', 'space', 'river', 'green', 'cloud', 'train',
  'planet', 'rocket', 'string', 'number', 'button', 'screen', 'window', 'random', 'object', 'player', 'dragon', 'puzzle',
  'keyboard', 'function', 'variable', 'computer', 'triangle', 'elephant', 'mountain', 'sandwich',
]

function spawn() {
  const text = WORDS[Math.floor(Math.random() * WORDS.length)]
  ctx.font = FONT
  const width = ctx.measureText(text).width
  words.push({ text, x: 10 + Math.random() * (canvas.width - 20 - width), y: 30 })
}
```

What it means

• Math.random() is a random number from 0 up to 1; times WORDS.length, rounded down by Math.floor, it is a random position in the list.
• ctx.measureText(text).width is the text's width in pixels with the current font.
• x goes from 10 to canvas.width - 10 - width, so the word always fits. push adds the new word to the list.
• { text, ... } is short for { text: text, ... }.

Your turn

1. Under const ctx = ... and its empty line, above GROUND, write WORDS.
2. Above function reset() { write spawn, with an empty line after it.

Skills: Arrays and objects

← The game loop Let it rain →

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