feat: add easter egg 🥚

Author: jjteoh

README.md

@@ -64,16 +64,19 @@ This project demonstrates:
 - Responsive design
 - Modern JavaScript features
 
-
 ## License 📄
 
 This project is open source and available under the [MIT License](LICENSE).
 
-## Acknowledgments 🙏
+## Credits 🙏
 
 - Inspired by the classic Nokia Snake game
-- Built with ❤️ for the web development community
+- Food eaten sound effect by [Ribhav Agrawal](https://pixabay.com/users/ribhavagrawal-39286533/)
+
+- Game over sound effect by [FoxBoyTails](https://pixabay.com/users/foxboytails-49447089)
+
+- Easter Egg video by [CuriosityShorts](https://www.youtube.com/watch?v=WAHoqt2y77k)
+
 
----
 
 *Enjoy the game? Star the repository and share it with your friends! ⭐*

index.html

@@ -53,6 +53,12 @@ <h2>Classic Snake</h2>
       </div>
 
     </div>
+
+    <!-- Easter Egg Video -->
+    <video id="easterEggVideo" class="easter-egg-video hidden" playsinline>
+      <source src="media/easter-egg-Lisan-al-Gaib.mp4" type="video/mp4">
+    </video>
+
     <footer class="footer">
       <p><small>Canvas Snake Game by <a href="https://github.com/jjteoh-thewebdev">JJTeoh</a> with ❤️</small></p>
     </footer>

media/easter-egg-Lisan-al-Gaib.mp4

@@ -9,10 +9,11 @@ const startMessageElement = document.getElementById("startMessage");
 const startButton = document.getElementById("startButton");
 const gameContainer = document.querySelector(".game-container");
 const canvasContainer = document.querySelector(".canvas-container");
+const easterEggVideo = document.getElementById("easterEggVideo");
 
 // --- Audio Elements ---
-const eatSound = new Audio('sounds/eat.mp3');
-const gameOverSound = new Audio('sounds/game-over.mp3');
+const eatSound = new Audio('media/eat.mp3');
+const gameOverSound = new Audio('media/game-over.mp3');
 
 // --- Game Constants ---
 const GRID_SIZE = 20; // Number of cells in the grid
@@ -146,7 +147,12 @@ function moveSnake() {
   if (head.x === food.x && head.y === food.y) {
     score++;
     scoreElement.textContent = `Score: ${score}`;
-    eatSound.play(); // Play eat sound effect
+    eatSound.play();
+
+    // Check for easter egg
+    if (score === 100) { // Trigger at 100
+      triggerEasterEgg();
+    }
 
     // create food at a new position
     generateFood();
@@ -361,6 +367,24 @@ function showStartMessage() {
   gameOverElement.classList.add("hidden");
 }
 
+function triggerEasterEgg() {
+  // Pause the game
+  gameActive = false;
+  clearInterval(gameLoopInterval);
+
+  // Show and play the video
+  easterEggVideo.classList.remove("hidden");
+  easterEggVideo.play();
+
+  // Hide the video when it ends
+  easterEggVideo.onended = function () {
+    easterEggVideo.classList.add("hidden");
+    // Resume the game
+    gameActive = true;
+    gameLoopInterval = setInterval(gameLoop, currentSpeed);
+  };
+}
+
 // --- Event Listeners ---
 document.addEventListener("keydown", handleKeyDown);
 restartButton.addEventListener("click", startGame);

sounds/eat.mp3 media/eat.mp3sounds/eat.mp3 renamed to media/eat.mp3

@@ -210,4 +210,18 @@
       padding: 8px 15px;
     }
   }
-  
+  
+  .easter-egg-video {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 90vw;
+    max-height: 90vh;
+    z-index: 1000;
+    background-color: black;
+  }
+
+  .easter-egg-video.hidden {
+    display: none;
+  }