diff --git a/Games/Emoji_Enigma/README.md b/Games/Emoji_Enigma/README.md new file mode 100644 index 0000000000..366120defd --- /dev/null +++ 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 new file mode 100644 index 0000000000..b151bb16e9 Binary files /dev/null and b/Games/Emoji_Enigma/assets/images/enigma.png differ diff --git a/Games/Emoji_Enigma/index.html b/Games/Emoji_Enigma/index.html new file mode 100644 index 0000000000..bb5e613e33 --- /dev/null +++ b/Games/Emoji_Enigma/index.html @@ -0,0 +1,30 @@ + + + + + + + Memory Emoji Game + + + +
+
+

Memory Emoji Game

+
+ + + +
Time: 0s
+ +
+
+
+

Leaderboard

+
    +
    + +
    + + + diff --git a/Games/Emoji_Enigma/script.js b/Games/Emoji_Enigma/script.js new file mode 100644 index 0000000000..003deaeb7a --- /dev/null +++ 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 = `
    ${emoji}
    `; + 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 new file mode 100644 index 0000000000..bf11117fb5 --- /dev/null +++ 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; +} diff --git a/README.md b/README.md index 6a5fc3f87b..13be61eab1 100644 --- a/README.md +++ b/README.md @@ -319,7 +319,8 @@ This repository also provides one such platforms where contributers come over an |[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)| |[AquaSort_Game](https://github.com/kunjgit/GameZone/tree/main/Games/AquaSort_Game) | | [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) | -| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) +| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) +| [Emoji Enigma](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Enigma) || diff --git a/assets/images/enigma.png b/assets/images/enigma.png new file mode 100644 index 0000000000..b151bb16e9 Binary files /dev/null and b/assets/images/enigma.png differ