Added New Game Emoji Charades (#212)

- Implemented new and fun emoji guessing game. - Implemented sounds for the good user experience in the game. - Enhanced the game view for the good looking ui. - Added more than 45 emoji's corresponding to their answers. Fixes #191 #### Demo Video https://github.com/Git21221/JS-beginner-projects/assets/112749383/7a6704f6-b962-4f76-9c77-d7bf5a76ab34
Git21221 · Oct 3, 2023 · d9e6719 · d9e6719
2 parents 8449a06 + 464bdf2
commit d9e6719
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 0 deletions.
diff --git a/Emoji_Charades/images/Emoji_Charades.jpg b/Emoji_Charades/images/Emoji_Charades.jpg
diff --git a/Emoji_Charades/index.html b/Emoji_Charades/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emoji Charades</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+</head>
+<body>
+    <h1>Emoji Charades</h1>
+    <h2 class="score">Score: <span id="score">0</span></h2>
+  <div id="emoji-container">
+    <span id="emoji"></span>
+  </div>
+  <input type="text" id="guess-input" placeholder="Enter your guess">
+  <button id="submit-btn">Submit</button>
+  <div id="result"></div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Emoji_Charades/script.js b/Emoji_Charades/script.js
@@ -0,0 +1,99 @@
+// List of emoji and corresponding answers
+const emojiList = [
+  { emoji: "🍎🍏", answer: "apple" },
+  { emoji: "🐱🐶", answer: "pets" },
+  { emoji: "🌞🏖️", answer: "summer" },
+  { emoji: "📚🎓", answer: "education" },
+  { emoji: "🍕🍔", answer: "fast food" },
+  { emoji: "🌈🦄", answer: "rainbow" },
+  { emoji: "🎮🕹️", answer: "video games" },
+  { emoji: "📷📸", answer: "photography" },
+  { emoji: "🚗🛣️", answer: "road trip" },
+  { emoji: "🌙🌟", answer: "starry night" },
+  { emoji: "🎉🎊", answer: "celebration" },
+  { emoji: "🌍🌱", answer: "environment" },
+  { emoji: "☕📚", answer: "coffee and books" },
+  { emoji: "🌼🐝", answer: "flowers and bees" },
+  { emoji: "🍦🎂", answer: "ice cream cake" },
+  { emoji: "🌺🌴", answer: "tropical paradise" },
+  { emoji: "🎈🎁", answer: "birthday party" },
+  { emoji: "🌞🌊", answer: "sunshine and beach" },
+  { emoji: "🐼🎋", answer: "panda and bamboo" },
+  { emoji: "🚀🌕", answer: "moon landing" },
+  { emoji: "🎭🎟️", answer: "theater tickets" },
+  { emoji: "📺🍿", answer: "movie night" },
+  { emoji: "🌮🌯", answer: "taco and burrito" },
+  { emoji: "🎵🎶", answer: "music festival" },
+  { emoji: "🌈🍀", answer: "luck of the Irish" },
+  { emoji: "📚📝", answer: "study notes" },
+  { emoji: "🎮👾", answer: "video game characters" },
+  { emoji: "🏰👑", answer: "royal castle" },
+  { emoji: "🎤🎵", answer: "singing performance" },
+  { emoji: "🍩☕", answer: "coffee and donuts" },
+  { emoji: "🐠🐟", answer: "underwater world" },
+  { emoji: "🌴🏖️", answer: "palm tree beach" },
+  { emoji: "🎭🎬", answer: "theater play" },
+  { emoji: "🍔🍟", answer: "burger and fries" },
+  { emoji: "🌞🌻", answer: "sunflower" },
+  { emoji: "🎣🐠", answer: "fishing" },
+  { emoji: "📸🌇", answer: "cityscape photography" },
+  { emoji: "🍩🍫", answer: "chocolate donut" },
+  { emoji: "🚲🌳", answer: "bike ride in the park" },
+  { emoji: "🎭🤡", answer: "circus performance" },
+  { emoji: "🎉🎁", answer: "birthday celebration" },
+  { emoji: "🏰👸", answer: "fairytale castle" },
+  { emoji: "🌍✈️", answer: "world travel" },
+  { emoji: "🍦🍨", answer: "ice cream delight" },
+  { emoji: "🎮🕹️", answer: "gaming session" },
+  { emoji: "🎭🎟️", answer: "theater show" },
+  { emoji: "🌴🍹", answer: "tropical cocktail" },
+];
+
+let currentQuestion; // Stores the current question
+let score = 0; // Stores the player's score
+
+let winSound = new Audio("./sounds/correct.mp3");
+let wrongSound = new Audio("./sounds/wrong.mp3");
+
+const guessInput = document.getElementById("guess-input");
+
+// Select random emoji and set it as the current question
+function selectRandomQuestion() {
+  currentQuestion = emojiList[Math.floor(Math.random() * emojiList.length)];
+  document.getElementById("emoji").textContent = currentQuestion.emoji;
+}
+
+guessInput.addEventListener("keypress", function (e) {
+  // If the user presses the "Enter" key on the keyboard
+  if (e.key === "Enter") {
+    e.preventDefault();
+    document.getElementById("submit-btn").click();
+  }
+});
+
+// Get user input and compare with the answer
+document.getElementById("submit-btn").addEventListener("click", function () {
+  const resultDiv = document.getElementById("result");
+
+  const userGuess = guessInput.value.toLowerCase();
+  const answer = currentQuestion.answer.toLowerCase();
+
+  if (userGuess === answer) {
+    winSound.play();
+    resultDiv.textContent = "Correct!";
+    resultDiv.style.color = "green";
+    score++;
+    document.getElementById("score").textContent = score;
+  } else {
+    wrongSound.play();
+    resultDiv.textContent = "Incorrect. Try again!";
+    resultDiv.style.color = "red";
+  }
+
+  // Reset input field and select new random question
+  guessInput.value = "";
+  selectRandomQuestion();
+});
+
+// Call selectRandomQuestion() when the page loads
+window.addEventListener("load", selectRandomQuestion);
diff --git a/Emoji_Charades/sounds/correct.mp3 b/Emoji_Charades/sounds/correct.mp3
diff --git a/Emoji_Charades/sounds/wrong.mp3 b/Emoji_Charades/sounds/wrong.mp3
diff --git a/Emoji_Charades/style.css b/Emoji_Charades/style.css
@@ -0,0 +1,56 @@
+body {
+  text-align: center;
+  font-family: Arial, sans-serif;
+  background-image: url("./images/Emoji_Charades.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+h1 {
+  color: #e57c23;
+  margin-top: 20px;
+}
+
+#emoji-container {
+  font-size: 72px;
+  margin: 50px 0;
+}
+
+#guess-input {
+  padding: 12px;
+  font-size: 16px;
+  width: 300px;
+  margin: 10px;
+}
+
+.score {
+  color: #025464;
+}
+
+#submit-btn {
+  padding: 12px 20px;
+  font-size: 16px;
+  background-color: #bebb0a;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#submit-btn:hover {
+  background-color: #fffb09;
+}
+
+#result {
+  margin-top: 20px;
+  font-weight: bold;
+  font-size: 21px;
+  color: #e8aa42;
+}
+
+#score {
+  color: #e8aa42;
+  font-weight: bold;
+  font-size: 24px;
+}