Workshop › Hangman › Step 22 of 36

The parts in a list

What we are doing

Six ifs that all say "the n-th part after n misses" can be one list and one loop. Functions are values, so the parts can sit in an array, in order, and we call the first wrong of them.

```js
// One drawing per wrong guess.
const PARTS = [
  () => {
    ctx.beginPath()
    ctx.arc(170, 110, 20, 0, Math.PI * 2) // head
    ctx.stroke()
  },
  () => line(170, 130, 170, 200), // body
  () => line(170, 150, 140, 180), // left arm
  () => line(170, 150, 200, 180), // right arm
  () => line(170, 200, 145, 245), // left leg
  () => line(170, 200, 195, 245), // right leg
]

  for (let i = 0; i < wrong; i++) PARTS[i]()
```

What it means

• PARTS is an array of six functions, in drawing order. The head needs three lines, so its function has a { } body; the others are one line call each.
• PARTS[0] is the first function; PARTS[0]() calls it.
• for (let i = 0; i < wrong; i++) repeats with i = 0, 1, ... up to wrong - 1. With 2 misses it calls PARTS[0]() and PARTS[1](): head and body.

Your turn

1. Above function draw() {, write the PARTS list (with its comment) and leave an empty line.
2. In draw, delete the head if block and the five if lines, and write the for line in their place.

Skills: Arrays and objects, Functions

← Body, arms and legs Losing →

All steps

1. A list of secret words
2. The canvas and the pen
3. Paint the paper
4. A function that draws
5. Pick a random word
6. Write the word
7. Hide it behind blanks
8. Remember the guesses
9. Draw again and again
10. A guess
11. Guess with the keyboard
12. Only letters count
13. Count the misses
14. The same letter twice is free
15. Six misses at most
16. Show the misses
17. List the wrong letters
18. Draw a line
19. The gallows
20. The first miss: a head
21. Body, arms and legs
22. The parts in a list
23. Losing
24. Winning
25. Show the word you missed
26. The end message
27. Play again
28. Never the same word twice
29. A winning streak
30. Remember the best streak
31. Where each key goes
32. Draw the keys
33. Center the last row
34. Keys that remember
35. Tap a key
36. Build it yourself: a hint button