Add pause and resume functionality to freeze game state

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

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Memory Block Game</title>
+
     <link rel="stylesheet" href="styles.css">
     <script defer src="script.js"></script>
 
@@ -15,43 +16,52 @@ <h1 class="title">Memory Block Game</h1>
 
 <div class="main-container">
 
+    <!-- 🎮 GAME SECTION -->
     <div class="game-section">
         <div class="game" id="game-grid">
-            <!-- Blocks are generated dynamically by JS -->
+            <!-- Blocks generated by JS -->
         </div>
 
-        <button id="reset">New Game</button>
+        <!-- ✅ GAME CONTROLS -->
+        <div class="controls">
+            <button id="pause-btn">⏸ Pause</button>
+            <button id="reset">New Game</button>
+        </div>
     </div>
 
+    <!-- 📊 SCOREBOARD -->
     <div class="scoreboard">
         <h2>Game Settings</h2>
+
         <!-- 🔊 Sound Controls -->
-<div class="setting-group">
-    <label>Sound</label>
-
-    <button id="mute-btn">🔊 Mute</button>
-
-    <input
-        type="range"
-        id="volume-slider"
-        min="0"
-        max="1"
-        step="0.1"
-        value="1"
-    >
-</div>
+        <div class="setting-group">
+            <label>Sound</label>
+            <button id="mute-btn">🔊 Mute</button>
+
+            <input
+                type="range"
+                id="volume-slider"
+                min="0"
+                max="1"
+                step="0.1"
+                value="1"
+            >
+        </div>
 
-<!-- 🎵 Audio elements -->
-<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>
+        <!-- 🎵 Audio -->
+        <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>
+
+        <!-- ⚙ Difficulty -->
         <div class="setting-group">
             <label>Select Difficulty:</label>
-<select id="difficulty-select">
-    <option value="easy">Easy</option>
-    <option value="medium" selected>Medium</option>
-    <option value="hard">Hard</option>
-</select>
+            <select id="difficulty-select">
+                <option value="easy">Easy</option>
+                <option value="medium" selected>Medium</option>
+                <option value="hard">Hard</option>
+            </select>
+
             <label>Grid Size:</label>
             <div class="grid-inputs">
                 <div class="grid-input-item">
@@ -64,7 +74,9 @@ <h2>Game Settings</h2>
                         <option value="6">6</option>
                     </select>
                 </div>
+
                 <span class="grid-x">x</span>
+
                 <div class="grid-input-item">
                     <span>Cols</span>
                     <select id="cols-select">
@@ -76,9 +88,13 @@ <h2>Game Settings</h2>
                     </select>
                 </div>
             </div>
-            <p class="grid-hint" id="grid-hint">At least one of rows or columns must be even.</p>
+
+            <p class="grid-hint" id="grid-hint">
+                At least one of rows or columns must be even.
+            </p>
         </div>
 
+        <!-- 👥 Players -->
         <label>Select Players:</label>
         <select id="player-count">
             <option value="2">2 Players</option>
@@ -92,9 +108,9 @@ <h3 id="turn-indicator">Player 1's Turn</h3>
 
         <div id="scores-container"></div>
     </div>
-
 </div>
 
+<!-- 🎉 WIN POPUP -->
 <div id="congratulation-popup">
     <h2>Congratulations! 🎉</h2>
     <p>You completed the game!</p>

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

@@ -1,3 +1,6 @@
+let isPaused = false;
+let pausedTime = 0;
+
 document.addEventListener("DOMContentLoaded", () => {
     const REAL_IMAGES = 18;
 
@@ -13,7 +16,7 @@ document.addEventListener("DOMContentLoaded", () => {
         { emoji: "🎪", color: "#db2777" }, { emoji: "🦄", color: "#9333ea" }
     ];
 
-    /* ── Sound setup (NEW) ───────────────────── */
+    /* ── Sound setup ───────────────────── */
     const flipSound = document.getElementById("flip-sound");
     const matchSound = document.getElementById("match-sound");
     const wrongSound = document.getElementById("wrong-sound");
@@ -35,12 +38,12 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     function playSound(sound) {
-        if (!isMuted) {
+        if (!isMuted && !isPaused) {
             sound.currentTime = 0;
             sound.play();
         }
     }
-    /* ───────────────────────────────────────── */
+    /* ─────────────────────────────────── */
 
     let blocks = [];
     let matchedPairs = 0;
@@ -163,7 +166,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     function flipBlock() {
-        if (lockBoard || gameOver || this === firstBlock) return;
+        if (isPaused || lockBoard || gameOver || this === firstBlock) return;
 
         if (!gameStarted) {
             gameStarted = true;
@@ -216,6 +219,8 @@ document.addEventListener("DOMContentLoaded", () => {
         playSound(wrongSound);
 
         setTimeout(() => {
+            if (isPaused) return;
+
             [firstBlock, secondBlock].forEach(block => {
                 block.classList.remove("flipped");
                 block.querySelector(".emoji-face").style.display = "none";
@@ -237,6 +242,7 @@ document.addEventListener("DOMContentLoaded", () => {
         matchedPairs = 0;
         gameStarted = false;
         gameOver = false;
+        isPaused = false;
 
         document.getElementById("player-count").disabled = false;
         document.getElementById("difficulty-select").disabled = false;
@@ -248,6 +254,17 @@ document.addEventListener("DOMContentLoaded", () => {
         document.getElementById("congratulation-popup").style.display = "none";
     }
 
+    /* ── Pause / Resume button ───────────── */
+    const pauseBtn = document.getElementById("pause-btn");
+
+    if (pauseBtn) {
+        pauseBtn.addEventListener("click", () => {
+            isPaused = !isPaused;
+            pauseBtn.textContent = isPaused ? "▶ Resume" : "⏸ Pause";
+        });
+    }
+    /* ───────────────────────────────────── */
+
     document.getElementById("reset").addEventListener("click", resetGame);
     document.getElementById("play-again").addEventListener("click", resetGame);
 

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

@@ -398,4 +398,10 @@ select:disabled {
     margin: 15px 0;
     box-shadow: 0 0 30px #FFD700;
     border: 2px solid white;
+}
+}
+.card:disabled,
+.card[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.7;
 }