Workshop › Typing Rain › Step 29 of 33

Where the keys go

What we are doing

On a phone there is no keyboard, so we will draw one under the ground: the three QWERTY rows, each centred under the one above. keyRect(row, i) works out where key i of a row goes.

```js
const ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm']
const KEY_W = 44
const KEY_H = 34
const KEYS_Y = 350

// The on-screen keyboard, one row under another, each row centered.
function keyRect(row, i) {
  const left = (canvas.width - ROWS[row].length * (KEY_W + 3) + 3) / 2
  return { x: left + i * (KEY_W + 3), y: KEYS_Y + row * (KEY_H + 7) }
}
```

What it means

• Keys are KEY_W by KEY_H, 3 pixels apart; rows are 7 pixels apart, from KEYS_Y.
• A row of n keys is n * (KEY_W + 3) - 3 pixels wide; left is half of what is left over, so the row is centred.
• It returns the key's top-left corner { x, y }.

Your turn

1. Under FONT write the four keyboard constants.
2. Above function draw() { write the comment and keyRect, with an empty line after it.

Skills: Arrays and objects, Functions

← Your speed at the end Draw the keyboard →

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