Kelompok02-Memory-Card/assets/gameboard-hard.js

// --- KONFIGURASI AUDIO & DOM ---
const bgMusic = document.getElementById("bgMusic");
const sfxClick = document.getElementById("sfxClick");
const sfxMatch = document.getElementById("sfxMatch");
const sfxWrong = document.getElementById("sfxWrong");
const sfxCountdown = document.getElementById("sfxCountdown");
const sfxWin = document.getElementById("sfxWin");
const sfxLose = document.getElementById("sfxLose");
const toggleBtn = document.getElementById("toggleMusic");
const overlay = document.getElementById("countdown-overlay");

let musicMuted = true;

// AUTO-PLAY PADA INTERAKSI PERTAMA
function initAudio() {
    if(musicMuted) {
        bgMusic.play().catch(() => {});
        bgMusic.volume = 0.5;
        toggleBtn.textContent = "🔊";
        musicMuted = false;
        document.removeEventListener('click', initAudio);
    }
}
document.addEventListener('click', initAudio);

toggleBtn.onclick = (e) => {
    e.stopPropagation();
    if (musicMuted) {
        bgMusic.play();
        toggleBtn.textContent = "🔊";
    } else {
        bgMusic.pause();
        toggleBtn.textContent = "🔇";
    }
    musicMuted = !musicMuted;
};

function playSFX(audio) {
    if(!musicMuted) {
        audio.currentTime = 0;
        audio.play().catch(() => {});
    }
}

// --- LOGIKA GAME ASLI ---
const images = [
  "images/fruit1.png", "images/fruit2.png", "images/fruit3.png",
  "images/fruit4.png", "images/fruit5.png", "images/fruit6.png",
];

let cards = [...images, ...images];
let flipped = [];
let timerStarted = false;
let time = 60;
let moves = 0;
let score = 0;
let countdown;
let combo = 1;
let lastMatchTime = 0;
let pendingMatch = false;

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

function runCountdown(callback) {
    let count = 3;
    overlay.style.display = "flex";
    overlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
    playSFX(sfxCountdown);

    let cdTimer = setInterval(() => {
        count--;
        if (count > 0) {
            overlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
            playSFX(sfxCountdown);
        } else if (count === 0) {
            overlay.innerHTML = `<span class="pulse-anim">GO!</span>`;
        } else {
            clearInterval(cdTimer);
            overlay.style.display = "none";
            callback();
        }
    }, 1000);
}

function startTimer() {
  timerStarted = true;
  countdown = setInterval(() => {
    document.getElementById("timer").textContent = --time;
    if (time <= 0) {
      clearInterval(countdown);
      showEndScreen(false); // Kalah
    }
  }, 1000);
}

function showEndScreen(isWin) {
  clearInterval(countdown);
  bgMusic.pause();

  if(isWin) playSFX(sfxWin); else playSFX(sfxLose);

  document.getElementById("endTitle").textContent = isWin ? "🎉 Selamat!" : "⏰ Waktu Habis!";
  document.getElementById("endMsg").textContent = isWin ? "Anda berhasil menyelesaikan permainan!" : "Coba lagi lain kali!";

  let baseScore = score;
  let timeBonus = time * 5;
  let moveBonus = Math.max(0, 200 - moves * 10);
  let total = baseScore + timeBonus + moveBonus;

  document.getElementById("baseScoreEnd").textContent = baseScore;
  document.getElementById("timeBonusEnd").textContent = "+" + (isWin ? timeBonus : 0);
  document.getElementById("moveBonusEnd").textContent = "+" + (isWin ? moveBonus : 0);
  document.getElementById("totalScoreEnd").textContent = isWin ? total : baseScore;
  document.getElementById("endScreen").style.display = "flex";
}

function flipCard(card) {
  if (!timerStarted) startTimer();
  if (flipped.length === 2 || card.classList.contains("matched") || card.classList.contains("flipped"))
    return;

  playSFX(sfxClick);
  card.classList.add("flipped");
  flipped.push(card);

  if (flipped.length === 2) {
    moves++;
    document.getElementById("moves").textContent = moves;
    let img1 = flipped[0].querySelector(".back img").src;
    let img2 = flipped[1].querySelector(".back img").src;

    if (img1 === img2) {
      playSFX(sfxMatch);
      const now = Date.now();
      if (!pendingMatch) { pendingMatch = true; combo = 1; } 
      else {
        if (now - lastMatchTime <= 3000) {
          combo++;
          score += (10 * combo);
          document.getElementById("score").textContent = score;
        } else { combo = 1; }
      }
      lastMatchTime = now;
      flipped.forEach(c => c.classList.add("matched"));
      score += 50;
      document.getElementById("score").textContent = score;
      time += 5;
      flipped = [];
      if (document.querySelectorAll(".matched").length === cards.length) {
        setTimeout(() => showEndScreen(true), 600);
      }
    } else {
      playSFX(sfxWrong);
      setTimeout(() => {
        flipped.forEach(c => c.classList.remove("flipped"));
        flipped = [];
      }, 800);
    }
  }
}

function startGame() {
  document.getElementById("endScreen").style.display = "none";
  const board = document.getElementById("game-board");
  board.innerHTML = "";
  
  runCountdown(() => {
    if(!musicMuted) bgMusic.play();
    const shuffledCards = shuffleArray([...cards]);
    shuffledCards.forEach(image => {
      const card = document.createElement("div");
      card.className = "card";
      card.innerHTML = `<div class="inner"><div class="front">?</div><div class="back"><img src="${image}"></div></div>`;
      card.onclick = () => flipCard(card);
      board.appendChild(card);
    });
    time = 60; moves = 0; score = 0; combo = 1;
    timerStarted = false;
    document.getElementById("timer").textContent = time;
    document.getElementById("moves").textContent = moves;
    document.getElementById("score").textContent = score;
  });
}

startGame();