diff --git a/Games/Emoji_Intruder/README.md b/Games/Emoji_Intruder/README.md new file mode 100644 index 0000000000..fd721a315b --- /dev/null +++ b/Games/Emoji_Intruder/README.md @@ -0,0 +1,4 @@ +

Emoji Intruder

+ +Emoji_Intruder + diff --git a/Games/Emoji_Intruder/index.html b/Games/Emoji_Intruder/index.html new file mode 100644 index 0000000000..23d127329b --- /dev/null +++ b/Games/Emoji_Intruder/index.html @@ -0,0 +1,23 @@ + + + + + + + Emoji Intruder Hunt + + + + +
+

Emoji Intruder Hunt

+
Time left: 20s
+
+
+
Click "Start" to play!
+ +
+ + + + \ No newline at end of file diff --git a/Games/Emoji_Intruder/script.js b/Games/Emoji_Intruder/script.js new file mode 100644 index 0000000000..f967c47e4e --- /dev/null +++ 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 ``; + }).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 new file mode 100644 index 0000000000..7aca0d114f --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/README.md b/README.md index 4592f4172f..3289c3c3d6 100644 --- 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)| diff --git a/assets/images/Emoji_Intruder.png b/assets/images/Emoji_Intruder.png new file mode 100644 index 0000000000..d74a408442 Binary files /dev/null and b/assets/images/Emoji_Intruder.png differ