update music background

2025-12-15 22:52:17 +07:00 · 2025-12-15 22:52:17 +07:00 · 255a35e4ac
commit 255a35e4ac
parent 4e8855532e
9 changed files with 217 additions and 120 deletions
--- a/gameboard-easy.html
+++ b/gameboard-easy.html
@ -20,6 +20,30 @@ body {
  flex-direction: column;
 }

+/* OVERLAY COUNTDOWN */
+#countdown-overlay {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0,0,0,0.85);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  color: white;
+  font-size: 150px;
+  font-weight: 800;
+  display: none;
+}
+
+.pulse-anim {
+  animation: pulse 1s ease-out infinite;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(2); opacity: 0; }
+}
+
 .topbar {
  display: flex;
  justify-content: space-between;
@ -67,7 +91,7 @@ body {
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
-  box-sizing: border-box;
+  box-sizing: border-box;   
 }

 .card {
@ -200,38 +224,25 @@ body {
  font-weight: 600;
 }

-.gameboard {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;               
-  padding: 25px 40px;      
-  box-sizing: border-box;
-  place-items: center;     
-}
-
-.card {
-  width: 100%;
-  aspect-ratio: 4 / 3;     
-  perspective: 1000px;
-  cursor: pointer;
-}
-
 .play-again { background: #b700ff; color: white; }
 .leaderboard { background: gold; }
 .back-menu { background: #444; color: white; } 

-@keyframes fadeIn {
-  from { opacity:0; transform: scale(0.8); }
-  to { opacity:1; transform: scale(1); }
-}
-
-@media (max-width: 700px) {
-  .gameboard {
-    grid-template-columns: repeat(3, 1fr);
-    padding: 12px;
-    gap: 10px;
-  }
+.music-control {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 100;
+  background: white;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+  font-size: 20px;
 }

@media (max-width: 700px) {
@ -241,11 +252,22 @@ body {
    gap: 10px;
  }
 }
-
 </style>
 </head>
 <body>

+<div id="countdown-overlay"></div>
+
+<audio id="bgMusic" loop src="music_background.mp3"></audio>
+<audio id="sfxClick" src="music-click.mp3"></audio>
+<audio id="sfxMatch" src="music-correct.mp3"></audio>
+<audio id="sfxWrong" src="music-incorrect.mp3"></audio>
+<audio id="sfxCountdown" src="music-countdown.mp3"></audio>
+<audio id="sfxWin" src="music-win.mp3"></audio>
+<audio id="sfxLose" src="music-lose.mp3"></audio>
+
+<div class="music-control" id="toggleMusic">🔇</div>
+
 <header class="topbar">
  <button class="back-btn" onclick="window.location.href='mainboard.html'">←</button>
  <div class="right-info">
@ -256,16 +278,16 @@ body {
 </header>

 <div id="game-board" class="gameboard"></div>
+
 <div id="endScreen" class="end-screen">
  <div class="end-box">
-    <div class="end-title">🎉 Selamat!</div>
-    <p>Anda berhasil menyelesaikan permainan!</p>
+    <div id="endTitle" class="end-title">🎉 Selamat!</div>
+    <p id="endMsg">Anda berhasil menyelesaikan permainan!</p>

    <div class="score-row"><span>Skor Base:</span> <span id="baseScoreEnd">0</span></div>
    <div class="score-row"><span>Time Bonus:</span> <span id="timeBonusEnd">0</span></div>
    <div class="score-row"><span>Move Bonus:</span> <span id="moveBonusEnd">0</span></div>
    <hr>
-
    <div class="score-row" style="font-weight:700;">
      <span>Total Skor:</span>
      <span id="totalScoreEnd">0</span>
@ -274,18 +296,58 @@ body {
    <button class="end-btn play-again" onclick="startGame()">🔁 Main Lagi</button>
    <button class="end-btn leaderboard">🏆 Lihat Leaderboard</button>
    <button class="end-btn back-menu" onclick="window.location.href='mainboard.html'">⬅ Kembali</button>
-
  </div>
 </div>

 <script>
+// --- 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",
+  "images/fruit1.png", "images/fruit2.png", "images/fruit3.png",
+  "images/fruit4.png", "images/fruit5.png", "images/fruit6.png",
 ];

 let cards = [...images, ...images];
@ -299,21 +361,6 @@ let combo = 1;
 let lastMatchTime = 0;
 let pendingMatch = false;

-function showComboPopup(targetCard, combo, bonus) {
-  const popup = document.createElement("div");
-  popup.className = "combo-popup";
-  popup.innerHTML = `
-      COMBO X${combo}<br>
-      <span style="font-size:14px; opacity:0.9;">+${bonus} Bonus</span>
-  `;
-  const rect = targetCard.getBoundingClientRect();
-  popup.style.left = rect.left + rect.width / 2 + "px";
-  popup.style.top = rect.top + "px";
-  popup.style.position = "fixed";
-  document.body.appendChild(popup);
-  setTimeout(() => popup.remove(), 1500);
-}
-
 function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
@ -322,27 +369,56 @@ function shuffleArray(array) {
  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();
+      showEndScreen(false); // Kalah
    }
  }, 1000);
 }

-function showEndScreen() {
+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 = "+" + timeBonus;
-  document.getElementById("moveBonusEnd").textContent = "+" + moveBonus;
-  document.getElementById("totalScoreEnd").textContent = total;
+  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";
 }

@ -350,52 +426,39 @@ 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 (!pendingMatch) { pendingMatch = true; combo = 1; } 
+      else {
        if (now - lastMatchTime <= 3000) {
          combo++;
-          let comboBonus = 10 * combo;
-          score += comboBonus;
+          score += (10 * combo);
          document.getElementById("score").textContent = score;
-
-          showComboPopup(flipped[0], combo, comboBonus);
-        } else {
-          combo = 1;
-          pendingMatch = true;
-        }
+        } else { combo = 1; }
      }
-
      lastMatchTime = now;
      flipped.forEach(c => c.classList.add("matched"));
-
      score += 50;
      document.getElementById("score").textContent = score;
-
      time += 5;
-      document.getElementById("timer").textContent = time;
-
      flipped = [];
-
      if (document.querySelectorAll(".matched").length === cards.length) {
-        setTimeout(showEndScreen, 600);
+        setTimeout(() => showEndScreen(true), 600);
      }
-
    } else {
+      playSFX(sfxWrong);
      setTimeout(() => {
        flipped.forEach(c => c.classList.remove("flipped"));
        flipped = [];
@ -406,42 +469,28 @@ function flipCard(card) {

 function startGame() {
  document.getElementById("endScreen").style.display = "none";
-
  const board = document.getElementById("game-board");
  board.innerHTML = "";
-  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);
+  
+  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;
  });
-
-  time = 60;
-  moves = 0;
-  score = 0;
-
-  combo = 1;
-  lastMatchTime = 0;
-  pendingMatch = false;
-
-  flipped = [];
-  timerStarted = false;
-
-  document.getElementById("timer").textContent = time;
-  document.getElementById("moves").textContent = moves;
-  document.getElementById("score").textContent = score;
 }

 startGame();
 </script>
-
 </body>
-</html>
+</html>
--- a/mainboard.html
+++ b/mainboard.html
@ -99,7 +99,7 @@ body {
 }

 /* ================================
-   🎀 BUTTONS
+ 🎀 BUTTONS
 ================================== */

 .btn {
@ -130,7 +130,7 @@ body {
 }

 /* ================================
-   📝 TITLE
+ 📝 TITLE
 ================================== */

 .title {
@ -149,7 +149,7 @@ body {
 }

 /* ================================
-   🎮 STAGE SELECTION GRID
+ 🎮 STAGE SELECTION GRID
 ================================== */

 .stage-grid {
@ -212,14 +212,47 @@ body {
  100% { transform: translateX(0); }
 }

+/* STYLE TAMBAHAN UNTUK TOMBOL SPEAKER */
+.music-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.music-btn {
+  width: 50px;
+  height: 50px;
+  background: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+  font-size: 24px;
+  transition: 0.3s;
+  border: none;
+}
+
+.music-btn:hover {
+  transform: scale(1.1);
+}
+
  </style>

 </head>

 <body>
+  <div class="music-container">
+    <button id="musicBtn" class="music-btn">🔇</button>
+  </div>
+  <audio id="bgMusic" loop>
+    <source src="music_background.mp3" type="audio/mpeg">
+  </audio>
+
  <div class="container">

-    <!-- animasi -->
    <img src="images/fruit1.png" class="fruit f1">
    <img src="images/fruit2.png" class="fruit f2">
    <img src="images/fruit3.png" class="fruit f3">
@ -231,7 +264,6 @@ body {
    <img src="images/fruit9.png" class="fruit f9">
    <img src="images/fruit10.png" class="fruit f10">

-    <!-- HEADER -->
    <header class="header glass">
      <div class="user-info">
        <div>
@ -251,7 +283,6 @@ body {
      <p>Pilih tingkat kesulitan untuk memulai permainan</p>
    </div>

-    <!-- STAGE SELECTION -->
    <div class="stage-grid">
      <button class="stage-btn easy" onclick="selectStage('easy')">
        <span class="icon">😊</span>
@ -275,6 +306,23 @@ body {
  </div>

 <script>
+// LOGIKA MUSIK
+const musicBtn = document.getElementById('musicBtn');
+const bgMusic = document.getElementById('bgMusic');
+let isMusicPlaying = false;
+
+musicBtn.addEventListener('click', () => {
+  if (isMusicPlaying) {
+    bgMusic.pause();
+    musicBtn.innerText = '🔇';
+  } else {
+    bgMusic.play();
+    musicBtn.innerText = '🔊';
+  }
+  isMusicPlaying = !isMusicPlaying;
+});
+
+// Kodingan asli kamu tetap di bawah ini
 function selectStage(stage) {
  if (stage === "easy") {
    window.location.href = "gameboard-easy.html";
@ -293,4 +341,4 @@ document.getElementById("logoutBtn").addEventListener("click", () => {

 </script>
 </body>
-</html>
+</html>
--- a/music/music-click.mp3
+++ b/music/music-click.mp3
--- a/music/music-correct.mp3
+++ b/music/music-correct.mp3
--- a/music/music-countdown.mp3
+++ b/music/music-countdown.mp3
--- a/music/music-incorrect.mp3
+++ b/music/music-incorrect.mp3
--- a/music/music-lose.mp3
+++ b/music/music-lose.mp3
--- a/music/music-win.mp3
+++ b/music/music-win.mp3
--- a/music/music_background.mp3
+++ b/music/music_background.mp3