💻

Крок 2: Логіка перевертання і порівняння

Функції для перевірки пар, рахунку та перемоги

Як працює логіка гри

Гравець клікає картку → вона перевертається (isFlipped = true)
Якщо перевернуто вже 2 картки — перевіряємо:
- Однакові emoji → обидві залишаються (isMatched = true)
- Різні → обидві перевертаються назад через 1 секунду
Коли всі 8 пар знайдені → гра виграна

Функція перевірки пари

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

Підрахунок знайдених пар

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

Перевірка перемоги

function isGameWon(cards) {
  return cards.every(card => card.isMatched);
  // every повертає true якщо ВСІ елементи відповідають умові
}

Як з'єднати все разом (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();

Збери все разом: створи папку memory-game/, поклади в неї index.html, style.css і game.js. Відкрий index.html у браузері — і грай у власну гру!

Коментарі

Увійти або Почати щоб залишити коментар.