Update script.js

script.js

@@ -3,6 +3,8 @@ const scoreDisplay = document.getElementById('score');
 const gameArea = document.getElementById('game-area');
 const gameOverDisplay = document.getElementById('game-over');
 const pauseButton = document.getElementById('pause-button');
+const pauseMenu = document.getElementById('pause-menu');
+const resumeButton = document.getElementById('resume-button');
 let score = 0;
 let gameOver = false;
 let isPaused = false;
@@ -20,21 +22,16 @@ document.addEventListener('mousemove', (e) => {
     player.style.left = `${mouseX}px`;
 });
 
-// Pause on Esc key or if mouse leaves the game area
+// Pause on Esc key
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
         togglePause();
     }
 });
 
-document.addEventListener('mouseleave', () => {
-    if (!gameOver) {
-        togglePause();
-    }
-});
-
+// Pause on window blur
 window.addEventListener('blur', () => {
-    if (!gameOver) {
+    if (!gameOver && !isPaused) {
         togglePause();
     }
 });
@@ -67,8 +64,14 @@ pauseButton.addEventListener('click', () => {
     togglePause();
 });
 
+// Resume button
+resumeButton.addEventListener('click', () => {
+    togglePause();
+});
+
 // Create orbs
 function createOrb() {
+    if (isPaused || gameOver) return;
     const orb = document.createElement('div');
     orb.classList.add('orb');
     orb.style.backgroundColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
@@ -85,6 +88,10 @@ function createOrb() {
     gameArea.appendChild(trail);
 
     let interval = setInterval(() => {
+        if (isPaused || gameOver) {
+            clearInterval(interval);
+            return;
+        }
         let orbTop = parseFloat(getComputedStyle(orb).getPropertyValue('top'));
         orb.style.top = `${orbTop + orbSpeed}px`;
         if (orbTop > gameArea.offsetHeight) {
@@ -107,6 +114,7 @@ function createOrb() {
 
 // Create bonuses
 function createBonus() {
+    if (isPaused || gameOver) return;
     const bonus = document.createElement('div');
     bonus.classList.add('bonus');
     bonus.style.left = `${Math.random() * (gameArea.offsetWidth - 30)}px`;
@@ -122,6 +130,10 @@ function createBonus() {
     gameArea.appendChild(trail);
 
     let interval = setInterval(() => {
+        if (isPaused || gameOver) {
+            clearInterval(interval);
+            return;
+        }
         let bonusTop = parseFloat(getComputedStyle(bonus).getPropertyValue('top'));
         bonus.style.top = `${bonusTop + bonusSpeed}px`;
         if (bonusTop > gameArea.offsetHeight) {
@@ -166,7 +178,9 @@ function togglePause() {
     isPaused = !isPaused;
     if (isPaused) {
         clearInterval(intervalId);
-        pauseButton.textContent = 'Resume';
+        pauseButton.textContent = 'Pause';
+        pauseMenu.style.display = 'block';
+        pauseButton.style.display = 'none';
     } else {
         intervalId = setInterval(() => {
             createOrb();
@@ -174,7 +188,8 @@ function togglePause() {
                 createBonus();
             }
         }, 500);
-        pauseButton.textContent = 'Pause';
+        pauseMenu.style.display = 'none';
+        pauseButton.style.display = 'block';
     }
 }
 
@@ -185,6 +200,7 @@ function endGame() {
     gameOverDisplay.style.display = 'block';
     isPaused = true;
     pauseButton.style.display = 'none';
+    pauseMenu.style.display = 'none';
 }
 
 // Start game
@@ -197,6 +213,7 @@ function startGame() {
     gameOver = false;
     isPaused = false;
     pauseButton.style.display = 'none';
+    pauseMenu.style.display = 'none';
 
     intervalId = setInterval(() => {
         createOrb();