Add complete sound system with background music and localStorage pers…

Memory-block-game-main/code/index.html

@@ -42,10 +42,14 @@ <h2>Game Settings</h2>
             <input type="range" id="volume-slider" min="0" max="1" step="0.1" value="1">
         </div>
 
-        <audio id="flip-sound" src="./sounds/flip.mp3"></audio>
-        <audio id="match-sound" src="./sounds/match.mp3"></audio>
-        <audio id="wrong-sound" src="./sounds/wrong.mp3"></audio>
+        <!-- 🔊 Sound Effects -->
+<audio id="flip-sound" src="./sounds/flip.mp3"></audio>
+<audio id="match-sound" src="./sounds/match.mp3"></audio>
+<audio id="mismatch-sound" src="./sounds/mismatch.mp3"></audio>
+<audio id="win-sound" src="./sounds/win.mp3"></audio>
 
+<!-- 🎵 Background Music -->
+<audio id="bg-music" src="./sounds/bg.mp3" loop></audio>
         <div class="setting-group">
             <label>Select Difficulty:</label>
             <select id="difficulty-select">

Memory-block-game-main/code/script.js

@@ -16,34 +16,75 @@ document.addEventListener("DOMContentLoaded", () => {
         { emoji: "🎪", color: "#db2777" }, { emoji: "🦄", color: "#9333ea" }
     ];
 
-    /* ── Sound setup (NEW) ───────────────────── */
-    const flipSound = document.getElementById("flip-sound");
-    const matchSound = document.getElementById("match-sound");
-    const wrongSound = document.getElementById("wrong-sound");
+    /* ── SOUND SYSTEM ───────────────────────────────── */
+
+const flipSound = document.getElementById("flip-sound");
+const matchSound = document.getElementById("match-sound");
+const mismatchSound = document.getElementById("mismatch-sound");
+const winSound = document.getElementById("win-sound");
+const bgMusic = document.getElementById("bg-music");
+
+const muteBtn = document.getElementById("mute-btn");
+const volumeSlider = document.getElementById("volume-slider");
+
+let isMuted = localStorage.getItem("isMuted") === "true";
+// Load saved volume or default to 1
+let savedVolume = localStorage.getItem("volume");
+if (savedVolume === null) {
+    savedVolume = 1;
+} else {
+    savedVolume = parseFloat(savedVolume);
+}
+
+volumeSlider.value = savedVolume;
+
+// Set initial volume
+[flipSound, matchSound, mismatchSound, winSound, bgMusic].forEach(s => {
+    s.volume = savedVolume;
+});
+[flipSound, matchSound, mismatchSound, winSound, bgMusic]
+    .forEach(s => s.muted = isMuted);
 
-    const muteBtn = document.getElementById("mute-btn");
-    const volumeSlider = document.getElementById("volume-slider");
+muteBtn.textContent = isMuted ? "🔇 Unmute" : "🔊 Mute";
 
-    let isMuted = false;
+// Volume control
+volumeSlider.addEventListener("input", () => {
+    const volume = volumeSlider.value;
 
-    volumeSlider.addEventListener("input", () => {
-        const volume = volumeSlider.value;
-        [flipSound, matchSound, wrongSound].forEach(s => s.volume = volume);
-    });
+    [flipSound, matchSound, mismatchSound, winSound, bgMusic]
+        .forEach(s => s.volume = volume);
 
-    muteBtn.addEventListener("click", () => {
-        isMuted = !isMuted;
-        [flipSound, matchSound, wrongSound].forEach(s => s.muted = isMuted);
-        muteBtn.textContent = isMuted ? "🔇 Unmute" : "🔊 Mute";
-    });
+    localStorage.setItem("volume", volume);
+});
 
-    function playSound(sound) {
-        if (!isMuted) {
-            sound.currentTime = 0;
-            sound.play();
-        }
+// Mute button
+muteBtn.addEventListener("click", () => {
+    isMuted = !isMuted;
+
+    [flipSound, matchSound, mismatchSound, winSound, bgMusic]
+        .forEach(s => s.muted = isMuted);
+
+    muteBtn.textContent = isMuted ? "🔇 Unmute" : "🔊 Mute";
+
+    localStorage.setItem("isMuted", isMuted);
+});
+
+// Play helper
+function playSound(sound) {
+    if (!isMuted) {
+        sound.currentTime = 0;
+        sound.play();
     }
-    /* ───────────────────────────────────────── */
+}
+
+// 🎵 Start background music on first interaction
+document.addEventListener("click", () => {
+    if (!isMuted) {
+        bgMusic.play().catch(() => {});
+    }
+}, { once: true });
+
+/* ─────────────────────────────────────────────── */
 
     let blocks = [];
     let matchedPairs = 0;
@@ -287,10 +328,18 @@ document.addEventListener("DOMContentLoaded", () => {
             rowsSelect.disabled = true;
             colsSelect.disabled = true;
         }
+this.classList.add("flipped");
+
+const face = this.querySelector("img, .emoji-face");
+if (face) {
+    if (face.tagName === "IMG") {
+        face.style.display = "block";
+    } else {
+        face.style.display = "flex";
+    }
+}
 
-        this.classList.add("flipped");
-        this.querySelector(".emoji-face").style.display = "flex";
-        playSound(flipSound);
+playSound(flipSound);
 
         if (!hasFlippedBlock) {
             hasFlippedBlock = true;
@@ -318,6 +367,7 @@ document.addEventListener("DOMContentLoaded", () => {
         playSound(matchSound);
 
         if (matchedPairs === totalPairs) {
+            playSound(winSound);
             document.getElementById("congratulation-popup").style.display = "block";
             gameOver = true;
         }
@@ -327,7 +377,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     function unflipBlocks() {
         lockBoard = true;
-        playSound(wrongSound);
+        playSound(mismatchSound);
 
         setTimeout(() => {
             firstBlock.classList.remove("flipped");

Memory-block-game-main/code/styles.css

@@ -61,6 +61,7 @@ body {
     border-radius: 12px;
     cursor: pointer;
     position: relative;
+    overflow: hidden;
     transition: transform 0.3s ease, background 0.4s ease;
     display: flex;
     align-items: center;
@@ -82,6 +83,13 @@ body {
     font-size: calc(var(--block-size, 120px) * 0.45);
     line-height: 1;
 }
+.block img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+    display: none;
+}
 
 /* ── Buttons ──────────────────────────────────────────────────── */
 #reset {