kunjgit · kunjgit · Oct 4, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/Games/Emoji_Intruder/README.md b/Games/Emoji_Intruder/README.md
@@ -0,0 +1,4 @@
+<h1>Emoji Intruder</h1>
+
+<img width="544" alt="Emoji_Intruder" src="https://github.com/Nikita06211/GameZone/assets/120494269/14917705-e232-4d69-957d-cce306eacf30">
+
diff --git a/Games/Emoji_Intruder/index.html b/Games/Emoji_Intruder/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Emoji Intruder Hunt</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="header">
+    <h1>Emoji Intruder Hunt</h1>
+    <div id="timer">Time left: <span id="timeLeft">20</span>s</div>
+  </div>
+  <div id="gridContainer" class="disabled"></div>
+  <div class="instruction" id="instruction">Click "Start" to play!</div>
+  <button id="startButton">Start</button>
+  <div id="result"></div>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Emoji_Intruder/script.js b/Games/Emoji_Intruder/script.js
@@ -0,0 +1,97 @@
+const gridContainer = document.getElementById('gridContainer');
+const instruction = document.getElementById('instruction');
+const timer = document.getElementById('timer');
+const timeLeftDisplay = document.getElementById('timeLeft');
+const result = document.getElementById('result');
+
+const emojisList = [
+  "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "😭", "😢"
+];
+
+let gridItems = [];
+let oddOneOutIndex = -1;
+let timeLeft = 20;
+let timerId = null;
+
+function generateRandomGrid() {
+  const randomIndex = Math.floor(Math.random() * emojisList.length);
+  oddOneOutIndex = Math.floor(Math.random() * 63); // 7 columns * 9 rows = 63 cells
+
+  gridItems = Array.from({ length: 63 }, (_, index) => {
+    return index === oddOneOutIndex ? emojisList[randomIndex] : emojisList[randomIndex];
+  });
+
+  // Ensure there is at least one different emoji
+  if (gridItems.every((emoji, index) => emoji === gridItems[oddOneOutIndex] || index === oddOneOutIndex)) {
+    const newRandomIndex = (randomIndex + 1) % emojisList.length;
+    const randomCell = Math.floor(Math.random() * 63);
+    gridItems[randomCell] = emojisList[newRandomIndex];
+    oddOneOutIndex = randomCell;
+  }
+}
+
+function displayGrid() {
+  gridContainer.innerHTML = gridItems.map((emoji, index) => {
+    return `<button class="emoji-button ${index === oddOneOutIndex ? 'odd' : ''}" data-index="${index}">${emoji}</button>`;
+  }).join('');
+}
+
+function startGame() {
+  clearInterval(timerId);
+  timeLeft = 20;
+  timerId = setInterval(updateTime, 1000);
+
+  gridContainer.addEventListener('click', checkEmoji);
+  gridContainer.classList.remove('disabled');
+  result.textContent = '';
+  instruction.textContent = 'Find the odd one out among the emojis.';
+
+  // Remove 'highlight' class from all emoji buttons before generating the grid
+  const emojiButtons = document.querySelectorAll('.emoji-button');
+  emojiButtons.forEach(button => {
+    button.classList.remove('highlight');
+  });
+
+  generateRandomGrid();
+  displayGrid();
+}
+
+function updateTime() {
+  timeLeft--;
+  timeLeftDisplay.textContent = timeLeft;
+  if (timeLeft <= 0) {
+    clearInterval(timerId);
+    gridContainer.removeEventListener('click', checkEmoji);
+    gridContainer.classList.add('disabled');
+
+    // Highlight the odd emoji after time runs out
+    const oddEmojiButton = gridContainer.querySelector(`[data-index="${oddOneOutIndex}"]`);
+    oddEmojiButton.classList.add('highlight');
+
+    instruction.textContent = 'Time\'s up! Click "Start" to play again.';
+  }
+}
+
+function checkEmoji(event) {
+  if (event.target.classList.contains('emoji-button')) {
+    const clickedIndex = parseInt(event.target.dataset.index);
+    if (clickedIndex === oddOneOutIndex) {
+      result.textContent = 'Correct! You found the odd one out!';
+    } else {
+      result.textContent = 'Wrong! Keep looking!';
+    }
+
+    clearInterval(timerId);
+    gridContainer.removeEventListener('click', checkEmoji);
+    gridContainer.classList.add('disabled');
+
+    // Highlight the odd emoji after player's selection
+    const oddEmojiButton = gridContainer.querySelector(`[data-index="${oddOneOutIndex}"]`);
+    oddEmojiButton.classList.add('highlight');
+
+    instruction.textContent = 'Click "Start" to play again.';
+  }
+}
+
+document.getElementById('startButton').addEventListener('click', startGame);
+displayGrid();
diff --git a/Games/Emoji_Intruder/style.css b/Games/Emoji_Intruder/style.css
@@ -0,0 +1,65 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    margin: 20px;
+  }
+
+  .header {
+    margin-bottom: 20px;
+  }
+
+  h1 {
+    font-size: 32px;
+  }
+
+  #gridContainer {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    gap: 10px;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  .emoji-button {
+    font-size: 30px;
+    padding: 10px;
+    border: none;
+    background-color: #f2f2f2;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .emoji-button:hover {
+    background-color: #e0e0e0;
+  }
+
+  .instruction {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+
+  .highlight {
+    background-color: #f9a825 !important;
+    color: #fff;
+  }
+
+  #startButton {
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }
+
+  #result {
+    font-size: 18px;
+    margin-top: 10px;
+    font-weight: bold;
+    color: #007bff;
+  }
+
diff --git a/README.md b/README.md
@@ -493,6 +493,7 @@ This repository also provides one such platforms where contributers come over an
 | 381 | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road)|
 | 382 | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero)|
 | 383 | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner)|
+| 383 | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)|
 
  </center>
 

diff --git a/assets/images/Emoji_Intruder.png b/assets/images/Emoji_Intruder.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		<h1>Emoji Intruder</h1>

		<img width="544" alt="Emoji_Intruder" src="https://github.com/Nikita06211/GameZone/assets/120494269/14917705-e232-4d69-957d-cce306eacf30">