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

Where the keys go

What we are doing

A phone has no keyboard for a canvas, so the game draws its own. keyRects() turns three strings (one per row, like a real keyboard) into a list of rectangles, each row centered. The same list will be used to draw the keys and to find the key under a tap.

```js
const KEY_ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm']
const KEY_W = 32
const KEY_H = 44
const KEYS_TOP = 408

// The on-screen keyboard: each row is centered.
function keyRects() {
  const rects = []
  KEY_ROWS.forEach((row, r) => {
    const total = row.length * KEY_W + (row.length - 1) * 4
    let x = (canvas.width - total) / 2
    ;[...row].forEach((k) => {
      rects.push({ key: k, label: k, x, y: KEYS_TOP + r * (KEY_H + 6), w: KEY_W, h: KEY_H })
      x += KEY_W + 4
    })
  })
  return rects
}
```

What it means

A key is 32×44 pixels, 4 pixels apart; rows are 50 pixels apart, starting at y = 408.
For each row, total is its width; x starts at the left edge that centers it and moves right after every key.
Each key becomes { key, label, x, y, w, h }.

Your turn

Under COLORS, write the four keyboard constants.
Above function draw() {, write the comment and keyRects, and leave an empty line. Press Run.

Skills: Arrays and objects

← A message line Draw the keyboard →

All steps