💻

Step 1: Card Data and Shuffling

Create a card array and a shuffling algorithm

Data structure

Each card is an object with a few properties:

{
  id: 0,            // unique number
  emoji: '🐶',     // what's shown
  isFlipped: false, // face-up or not
  isMatched: false  // pair found or not
}

For a 4×4 game we need 16 cards = 8 pairs (each emoji twice).

javascript

💬

Spread [...EMOJIS, ...EMOJIS] joins the array with itself — 8 → 16 elements. Then .map() converts each emoji into a card object.

Fisher-Yates shuffle algorithm

The best way to shuffle an array evenly:

function shuffleArray(array) {
  const arr = [...array]; // copy (don't mutate the original)
  for (let i = arr.length - 1; i > 0; i--) {
    // Random index from 0 to i inclusive
    const j = Math.floor(Math.random() * (i + 1));
    // Swap
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

[arr[i], arr[j]] = [arr[j], arr[i]] — destructuring swap. The JS way to swap two values without a temp variable.

Step 1: Card Data and Shuffling

Data structure

Fisher-Yates shuffle algorithm

Comments

Practice