💻

Step 2: Flip and Match Logic

Functions for checking pairs, score and win condition

How the game logic works

Player clicks a card → it flips (isFlipped = true)
If 2 cards are already flipped — check:
- Same emoji → both stay open (isMatched = true)
- Different → both flip back after 1 second
When all 8 pairs are found → game won

Pair check function

function isMatch(card1, card2) {
  return card1.emoji === card2.emoji;
}

Count found pairs

function countMatched(cards) {
  return cards.filter(card => card.isMatched).length;
}

Win check

function isGameWon(cards) {
  return cards.every(card => card.isMatched);
  // every returns true if ALL elements satisfy the condition
}

Як з'єднати все разом (game.js)

Після того як всі функції написані, головний файл game.js виглядає так:

// Стан гри
let cards = [];
let flippedCards = [];
let moves = 0;
let timer = 0;
let timerInterval = null;

// Ініціалізація
function initGame() {
  cards = shuffleArray(createCards());
  flippedCards = [];
  moves = 0;
  timer = 0;
  clearInterval(timerInterval);
  timerInterval = setInterval(() => {
    timer++;
    document.getElementById('timer').textContent = timer + 's';
  }, 1000);
  renderBoard();
  document.getElementById('moves').textContent = '0';
  document.getElementById('win-screen').hidden = true;
}

// Рендер сітки карток
function renderBoard() {
  const board = document.getElementById('game-board');
  board.innerHTML = '';
  cards.forEach(card => {
    const el = document.createElement('div');
    el.className = 'card' + (card.isFlipped ? ' flipped' : '') + (card.isMatched ? ' matched' : '');
    el.innerHTML = `
      <div class="card-inner">
        <div class="card-front">🃏</div>
        <div class="card-back">${card.emoji}</div>
      </div>`;
    el.addEventListener('click', () => handleCardClick(card.id));
    board.appendChild(el);
  });
}

// Клік по картці
function handleCardClick(cardId) {
  const card = cards.find(c => c.id === cardId);
  if (!card || card.isFlipped || card.isMatched || flippedCards.length === 2) return;

  card.isFlipped = true;
  flippedCards.push(card);
  renderBoard();

  if (flippedCards.length === 2) {
    moves++;
    document.getElementById('moves').textContent = moves;
    if (isMatch(flippedCards[0], flippedCards[1])) {
      flippedCards[0].isMatched = true;
      flippedCards[1].isMatched = true;
      flippedCards = [];
      renderBoard();
      if (isGameWon(cards)) showWinScreen();
    } else {
      setTimeout(() => {
        flippedCards.forEach(c => c.isFlipped = false);
        flippedCards = [];
        renderBoard();
      }, 1000);
    }
  }
}

function showWinScreen() {
  clearInterval(timerInterval);
  document.getElementById('win-message').textContent =
    `Знайшов всі пари за ${moves} ходів і ${timer} секунд!`;
  document.getElementById('win-screen').hidden = false;
}

document.getElementById('restart-btn').addEventListener('click', initGame);
document.getElementById('play-again-btn').addEventListener('click', initGame);

initGame();

Put it all together: create a folder memory-game/, put index.html, style.css and game.js in it. Open index.html in the browser — and play your own game!