memory game

// Define global variables

let gridSize = 6; // Number of rows and columns in the grid

let cards = []; // Array to hold card values

let flipped = []; // Stores currently flipped cards

let matched = []; // Keeps track of matched card indices

let tileSize; // Size of each card

let moves = 0; // Counter for the number of moves

let colors = {}; // Object to map card numbers to specific colors

let vibrantPalette = [

  "#FF5733", "#FFBD33", "#DBFF33", "#75FF33", "#33FF57", "#33FFBD",

  "#33DBFF", "#3375FF", "#5733FF", "#BD33FF", "#FF33DB", "#FF3375",

  "#FF3333", "#FF7F50", "#FFD700", "#ADFF2F", "#7CFC00", "#40E0D0"

]; // Vibrant color palette for card matching

​

let margin = 50; // Margin around the card grid

let backgroundYOffset = 70; // Offset to move the background downwards

​

function setup() {

  createCanvas(700, 750); // Create a canvas to accommodate the grid and spacing

  tileSize = (width - 2 * margin) / gridSize; // Calculate card size based on grid size and margins

  initializeCards(); // Generate and shuffle card pairs

  initializeColors(); // Assign colors based on card values

}

​

function draw() {

  // Draw the white background with an offset

  fill(255); // Set background color to white

  rect(0, backgroundYOffset, width, height - backgroundYOffset); // Draw background rectangle below the counter area

​

  // Clear the area where the moves counter is displayed

  fill(255); // Set fill color to white

  rect(0, 0, width, backgroundYOffset); // Clear the top area for the moves counter

​

  // Display the moves counter at the top center

  fill(50); // Set text color to dark gray

  textSize(20); // Set text size

  textAlign(CENTER, CENTER); // Align text to center

  textStyle(BOLD); // Use bold font style

  text(`Moves: ${moves}`, width / 2, 30); // Draw the moves counter text

​

  // Center the card grid on the canvas

  let gridOffsetX = (width - gridSize * tileSize) / 2; // Calculate horizontal offset to center the grid

  let gridOffsetY = backgroundYOffset + (height - backgroundYOffset - gridSize * tileSize) / 2; // Calculate vertical offset to center the grid

​

  // Draw the grid of cards

  for (let i = 0; i < gridSize; i++) {

    for (let j = 0; j < gridSize; j++) {

      let index = i * gridSize + j; // Calculate the index of the card

      let x = j * tileSize + gridOffsetX; // Calculate the x-position of the card

      let y = i * tileSize + gridOffsetY; // Calculate the y-position of the card

​

      if (flipped.includes(index) || matched.includes(index)) {

        // If the card is flipped or matched, show its face

        fill(colors[cards[index]]); // Set fill color based on card value

        rect(x, y, tileSize, tileSize, 10); // Draw the card with rounded corners

        fill(255); // Set text color to white

        textSize(tileSize / 2.5); // Set text size relative to card size

        textAlign(CENTER, CENTER); // Align text to center

        text(cards[index], x + tileSize / 2, y + tileSize / 2); // Draw the card's value

      } else {

        // If the card is not flipped or matched, show its back

        fill(150, 150, 255); // Set fill color to light blue

        rect(x, y, tileSize, tileSize, 10); // Draw the card with rounded corners

      }

    }

  }

}

​

// Initialize the cards by creating pairs and shuffling them

function initializeCards() {

  let numPairs = (gridSize * gridSize) / 2; // Calculate the number of pairs needed

  for (let i = 1; i <= numPairs; i++) {

    cards.push(i, i); // Add two cards for each pair

  }

  customShuffle(cards, true); // Shuffle the cards randomly

}

​

// Assign colors to each card value

function initializeColors() {

  let numPairs = (gridSize * gridSize) / 2; // Calculate the number of pairs

  for (let i = 1; i <= numPairs; i++) {

    colors[i] = color(vibrantPalette[(i - 1) % vibrantPalette.length]); // Assign a color from the palette

  }

}

​

// Handle mouse clicks to flip cards

function mousePressed() {

  let gridOffsetX = (width - gridSize * tileSize) / 2; // Calculate horizontal offset

  let gridOffsetY = backgroundYOffset + (height - backgroundYOffset - gridSize * tileSize) / 2; // Calculate vertical offset

​

  let x = floor((mouseX - gridOffsetX) / tileSize); // Calculate the column index of the clicked card

  let y = floor((mouseY - gridOffsetY) / tileSize); // Calculate the row index of the clicked card

  let index = y * gridSize + x; // Calculate the overall index of the clicked card

​

  if (index >= 0 && index < cards.length && !flipped.includes(index) && !matched.includes(index)) {

    flipped.push(index); // Add the card to the flipped array

    if (flipped.length === 2) {

      moves++; // Increment the moves counter

      let first = cards[flipped[0]]; // Get the value of the first flipped card

      let second = cards[flipped[1]]; // Get the value of the second flipped card

      if (first === second) matched.push(...flipped); // If they match, add them to the matched array

      setTimeout(() => {

        flipped = []; // Reset the flipped array after a delay

      }, 1000);

    }

  }

}

​

// Shuffle the cards randomly

function customShuffle(array, deep) {

  for (let i = array.length - 1; i > 0; i--) {

    let j = Math.floor(Math.random() * (i + 1)); // Generate a random index

    [array[i], array[j]] = [array[j], array[i]]; // Swap the elements

  }

}

​