Workshop › Memory › Step 13 of 25

Which card is at a point?

What we are doing

There are gaps between the cards, and a click in a gap should do nothing. So we ask each card: "is this point inside you?" cards.find returns the first card that says yes, or undefined.

```js
function cardAt(x, y) {
  return cards.find((card) => {
    const left = cardX(card)
    const top = cardY(card)
    return x >= left && x < left + CARD && y >= top && y < top + CARD
  })
}
```

What it means

• A point is inside when it is past the left edge but before the right edge, and past the top but before the bottom. && means "and".
• cards.find(test) returns the first card for which the test is true, or undefined.

Your turn

Under cardY, leave an empty line and write cardAt. Press Run.

Skills: Arrays and objects, Keyboard and mouse input

← A fair shuffle Click to turn a card →

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