kunjgit · Roshr2211 · Jun 4, 2024 · Jun 4, 2024 · Jun 4, 2024 · Jun 4, 2024
diff --git a/Games/Emoji_Enigma/README.md b/Games/Emoji_Enigma/README.md
@@ -0,0 +1,34 @@
+# Emoji Enigma
+
+Emoji Enigma is a fun and challenging memory card game where players match pairs of emojis hidden behind cards. Test your memory skills and compete for the top spot on the leaderboard!
+
+## Features
+
+- **Memory Card Game:** Flip cards to find matching emoji pairs.
+- **Timer:** Track your progress and challenge yourself to beat your best time.
+- **Leaderboard:** Compete with friends and other players for the top scores.
+- **Dark and Light Themes:** Toggle between dark and light themes to suit your preference.
+
+## How to Play
+
+1. Click on any facedown card to reveal the emoji underneath.
+2. Click on a second card to see if it matches the first.
+3. Match all pairs of emojis to complete the game.
+4. Enter your username to record your score on the leaderboard.
+
+## Screenshots
+![image](https://github.com/Roshr2211/GameZone/assets/136987759/ca30e415-67f5-4560-8472-b0f7875d63a7)
+
+
+## Usage
+Simply open the `index.html` file in a web browser to start playing Emoji Enigma. You can also customize the game by modifying the HTML, CSS, and JavaScript files as needed.
+
+## Demo 
+https://github.com/Roshr2211/GameZone/assets/136987759/d57a41e4-1909-4617-9803-2572866dc004
+
+
+## Contributing
+
+Contributions are welcome! Feel free to submit bug reports, feature requests, or pull requests to improve Emoji Enigma.
+
+
diff --git a/Games/Emoji_Enigma/assets/images/enigma.png b/Games/Emoji_Enigma/assets/images/enigma.png
diff --git a/Games/Emoji_Enigma/index.html b/Games/Emoji_Enigma/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Kode+Mono:[email protected]&family=Orbitron:[email protected]&display=swap" rel="stylesheet">
+  <title>Memory Emoji Game</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>Memory Emoji Game</h1>
+    <div class="info">
+        <!-- Add a button to toggle between dark and light themes -->
+    <button id="themeToggle">Toggle Theme</button>
+
+      <div class="timer" id="timer">Time: 0s</div>
+      <button id="restartButton">Restart</button>
+    </div>
+    <div class="game-board" id="gameBoard"></div>
+    <div class="leaderboard" id="leaderboard">
+      <h2>Leaderboard</h2>
+      <ol id="leaderboardList"></ol>
+    </div>
+
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Emoji_Enigma/script.js b/Games/Emoji_Enigma/script.js
@@ -0,0 +1,144 @@
+const emojis = [
+    '🍎', '🍎', '🍌', '🍌', '🍇', '🍇', '🍉', '🍉',
+    '🍓', '🍓', '🍒', '🍒', '🍍', '🍍', '🥭', '🥭'
+  ];
+
+  const gameBoard = document.getElementById('gameBoard');
+  const timerElement = document.getElementById('timer');
+  const restartButton = document.getElementById('restartButton');
+  const leaderboardList = document.getElementById('leaderboardList');
+  const themeToggle = document.getElementById('themeToggle');
+const body = document.body;
+
+themeToggle.addEventListener('click', toggleTheme);
+
+function toggleTheme() {
+  body.classList.toggle('dark-theme');
+  body.classList.toggle('light-theme');
+}
+
+// Check user's theme preference from local storage and apply it
+const theme = localStorage.getItem('theme');
+if (theme === 'dark') {
+  body.classList.add('dark-theme');
+} else {
+  body.classList.add('light-theme'); // Default to light theme
+}
+
+
+  let firstCard = null;
+  let secondCard = null;
+  let lockBoard = false;
+  let timer = 0;
+  let intervalId;
+  let matches = 0;
+  let leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
+
+  restartButton.addEventListener('click', restartGame);
+
+  function shuffle(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+  }
+
+  function createBoard() {
+    gameBoard.innerHTML = '';
+    shuffle(emojis);
+    emojis.forEach(emoji => {
+      const cardElement = document.createElement('div');
+      cardElement.classList.add('card');
+      cardElement.innerHTML = `<div class="emoji">${emoji}</div>`;
+      cardElement.addEventListener('click', flipCard);
+      gameBoard.appendChild(cardElement);
+    });
+  }
+
+  function startTimer() {
+    timer = 0;
+    timerElement.textContent = `Time: 0s`;
+    intervalId = setInterval(() => {
+      timer++;
+      timerElement.textContent = `Time: ${timer}s`;
+    }, 1000);
+  }
+
+  function stopTimer() {
+    clearInterval(intervalId);
+  }
+
+  function flipCard() {
+    if (lockBoard) return;
+    if (this === firstCard) return;
+
+    this.classList.add('flipped');
+
+    if (!firstCard) {
+      firstCard = this;
+    } else {
+      secondCard = this;
+      checkForMatch();
+    }
+  }
+
+  function checkForMatch() {
+    const isMatch = firstCard.innerHTML === secondCard.innerHTML;
+    isMatch ? disableCards() : unflipCards();
+  }
+
+  function disableCards() {
+    firstCard.removeEventListener('click', flipCard);
+    secondCard.removeEventListener('click', flipCard);
+    matches += 2;
+    resetBoard();
+
+    if (matches === emojis.length) {
+      stopTimer();
+      const username = prompt('Congratulations! Enter your name:');
+      saveScore(username, timer);
+      updateLeaderboard();
+    }
+  }
+
+  function unflipCards() {
+    lockBoard = true;
+    setTimeout(() => {
+      firstCard.classList.remove('flipped');
+      secondCard.classList.remove('flipped');
+      resetBoard();
+    }, 1000);
+  }
+
+  function resetBoard() {
+    [firstCard, secondCard, lockBoard] = [null, null, false];
+  }
+
+  function restartGame() {
+    stopTimer();
+    startTimer();
+    matches = 0;
+    createBoard();
+  }
+
+  function saveScore(username, score) {
+    leaderboard.push({ username, score });
+    leaderboard.sort((a, b) => a.score - b.score);
+    leaderboard = leaderboard.slice(0, 5); // Keep only top 5 scores
+
+    // Save leaderboard data to local storage
+    localStorage.setItem('leaderboard', JSON.stringify(leaderboard));
+  }
+
+  function updateLeaderboard() {
+    leaderboardList.innerHTML = '';
+    leaderboard.forEach((entry) => {
+      const listItem = document.createElement('li');
+      listItem.textContent = `${entry.username}: ${entry.score}s`;
+      leaderboardList.appendChild(listItem);
+    });
+  }
+
+  createBoard();
+  startTimer();
+
diff --git a/Games/Emoji_Enigma/styles.css b/Games/Emoji_Enigma/styles.css
@@ -0,0 +1,102 @@
+/* Define styles for both dark and light themes */
+body {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5% 20% 30% 40% ;
+  font-family: "Kode Mono", monospace;
+  transition: background-color 0.5s, color 0.5s;
+}
+
+.dark-theme {
+  background-color: #333;
+  color: #fff;
+}
+
+.light-theme {
+  background-color: #fff;
+  color: #333;
+}
+
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  width: 420px;
+  margin-bottom: 20px;
+}
+
+.timer {
+  font-size: 24px;
+}
+#themeToggle {
+  padding: 5px 10px;
+  font-size: 16px;
+  cursor: pointer;
+  font-family:Verdana, Geneva, Tahoma, sans-serif;
+}
+
+#restartButton {
+  padding: 5px 10px;
+  font-size: 16px;
+  cursor: pointer;
+  font-family:Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.game-board {
+  display: grid;
+  grid-template-columns: repeat(4, 100px);
+  grid-gap: 10px;
+  margin-bottom: 20px;
+}
+
+.card {
+  width: 100px;
+  height: 100px;
+  background-color: #444;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 48px;
+  border-radius: 10px;
+  transition: transform 0.3s;
+}
+
+.card.flipped {
+  background-color: #fff;
+  transform: rotateY(180deg);
+}
+
+.card .emoji {
+  display: none;
+}
+
+.card.flipped .emoji {
+  display: block;
+}
+
+.leaderboard {
+  /* background-color: #444; */
+  padding: 10px;
+  border-radius: 10px;
+  width: 200px;
+  text-align: center;
+}
+
+.leaderboard h2 {
+  margin: 0;
+  font-size: 24px;
+}
+
+.leaderboard ol {
+  list-style-type: decimal;
+  padding-left: 20px;
+  text-align: left;
+}