Workshop › Memory › Step 20 of 25

All pairs found

What we are doing

The game is won when every card is matched. A small function won() works the answer out from the cards each time, and draw shows the result over a dimmed board.

```js
function won() {
  return cards.every((card) => card.matched)
}

  if (won()) {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = 'white'
    ctx.font = 'bold 30px sans-serif'
    ctx.fillText('You found them all!', canvas.width / 2, 190)
    ctx.font = '20px sans-serif'
    ctx.fillText('in ' + moves + ' moves', canvas.width / 2, 230)
    ctx.font = '16px sans-serif'
    ctx.fillText('Click to play again', canvas.width / 2, 270)
  }
```

What it means

• cards.every(test) is true only if the test is true for every card.
• rgba(0, 0, 0, 0.6) is black at 60% strength: a curtain over the board.
• The texts are centered at canvas.width / 2, because textAlign is still 'center'.

Your turn

1. Above function flip, write won and an empty line.
2. In draw, after the card loop's closing }, leave an empty line and write the if (won()) block.

Skills: Game states, Drawing on a canvas

← Show moves and pairs Play again →

All steps

1. Get the canvas and the pen
2. The table
3. One card
4. A row of cards
5. Four rows
6. Every fruit twice
7. Cards that know themselves
8. A card's corner
9. Draw the cards from the list
10. Draw again and again
11. The face of a card
12. A fair shuffle
13. Which card is at a point?
14. Click to turn a card
15. One place for the rules
16. Two cards at a time
17. Pair or no pair
18. Count the moves
19. Show moves and pairs
20. All pairs found
21. Play again
22. A number that follows
23. Swap sides halfway
24. Animate the turn
25. Build it yourself: your best game