Workshop › Memory › Step 7 of 25

Cards that know themselves

What we are doing

A card is more than a fruit: it has a place on the grid and it is face up or not. map turns each fruit into a card object with those fields.

```js
const deck = [...SYMBOLS, ...SYMBOLS]
cards = deck.map((symbol, index) => ({
  symbol,
  col: index % SIZE,
  row: Math.floor(index / SIZE),
  faceUp: false,
  matched: false,
}))
```

What it means

• deck.map(fn) makes a new array by running fn on each item: here each fruit becomes a card object.
• symbol is the fruit, index its position 0 to 15. { symbol } is short for { symbol: symbol }.
• index % SIZE is the column (the remainder after dividing by 4), Math.floor(index / SIZE) the row.
• The object is wrapped in ( ) so the braces are not read as a function body.

Your turn

In newGame, replace cards = [...SYMBOLS, ...SYMBOLS] with the new lines. Press Run.

Skills: Arrays and objects, Game states

← Every fruit twice A card's corner →

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