💻

Krok 2: Logika odwracania i dopasowania

Funkcje do sprawdzania par, wyniku i warunku wygranej

Jak działa logika gry

Gracz klika kartę → obraca się (isFlipped = true)
Jeśli 2 karty są już odkryte — sprawdź:
- To samo emoji → obie zostają otwarte (isMatched = true)
- Różne → obie wracają po 1 sekundzie
Gdy wszystkie 8 par zostanie znalezionych → gra wygrana

Funkcja sprawdzania pary

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

Liczenie znalezionych par

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

Sprawdzenie wygranej

function isGameWon(cards) {
  return cards.every(card => card.isMatched);
  // every zwraca true jeśli WSZYSTKIE elementy spełniają warunek
}

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

Złóż to wszystko razem: stwórz folder memory-game/, umieść w nim index.html, style.css i game.js. Otwórz index.html w przeglądarce — i graj w swoją własną grę!

Komentarze

Zaloguj się lub Zacznij aby zostawić komentarz.