Merge pull request #4094 from DharshiBalasubramaniyam/cartoon-charact…

…er-guessing-game Cartoon character guessing game
kunjgit · Jun 7, 2024 · f668d66 · f668d66
2 parents f4b8f24 + b25ed42
commit f668d66
Show file tree

Hide file tree

Showing 10 changed files with 319 additions and 0 deletions.
diff --git a/Games/Cartoon_Character_Guessing_Game/README.md b/Games/Cartoon_Character_Guessing_Game/README.md
@@ -0,0 +1,29 @@
+# **Cartoon character guessing game** 
+
+---
+
+<br>
+
+## **Description 📃**
+Cartoon character guessing game is a simple game where players have to find the character who is display in image.
+
+<br>
+
+## **How to play? 🕹️**
+Players can start playing by click on the start button in the home page. For each image there will be four choices. Players have to select one from them. The response will be shown as soon as reacted to the question. Players will have 10s for answer each question.
+
+<br>
+
+## **Screenshots 📸**
+
+<br><img src="./images/image_01.png" alt="Image Description">
+<br>
+<img src="./images/image_02.png" alt="Image Description">
+<br>
+<img src="./images/image_03.png" alt="Image Description">
+
+
+
+
+
+<br>
diff --git a/Games/Cartoon_Character_Guessing_Game/game.html b/Games/Cartoon_Character_Guessing_Game/game.html
@@ -0,0 +1,17 @@
+`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Tailwind CSS CDN -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <title>Cartoon Character Guessing Game</title>
+</head>
+<body class="h-screen bg-blue-500 w-full flex items-center flex-col p-2">
+    <div class="question-wrapper bg-blue-600 p-3 text-center w-full hide">
+
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_01.png b/Games/Cartoon_Character_Guessing_Game/images/image_01.png
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_02.png b/Games/Cartoon_Character_Guessing_Game/images/image_02.png
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_03.png b/Games/Cartoon_Character_Guessing_Game/images/image_03.png
diff --git a/Games/Cartoon_Character_Guessing_Game/index.html b/Games/Cartoon_Character_Guessing_Game/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Tailwind CSS CDN -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <title>Cartoon Character Guessing Game</title>
+</head>
+<body class="h-screen bg-blue-500 w-full flex items-center flex-col p-2">
+    <div class="start bg-blue-600 p-3 text-center w-full">
+        <h1 class="text-gray-200 text-xl mb-4">Cartoon Character Guessing Game</h1>
+        <a href="./game.html"><button 
+            class="bg-blue-700 font-bold px-6 py-2 rounded hover:bg-blue-600 text-white focus:ring-2 focus:ring-blue-300 border-2 border-white"
+        >Start Game</button></a>
+    </div>
+</body>
+</html>
diff --git a/Games/Cartoon_Character_Guessing_Game/script.js b/Games/Cartoon_Character_Guessing_Game/script.js
@@ -0,0 +1,205 @@
+const data = [
+    {
+        "id": 1,
+        "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Mickey_Mouse_%28poster_version%29.svg/800px-Mickey_Mouse_%28poster_version%29.svg.png",
+        "character_name": "Mickey Mouse"
+    },
+    {
+        "id": 2,
+        "image_url": "https://th.bing.com/th/id/OIP.ggStsRwWxTyMR5U9BIWpFAHaHw?w=176&h=184&c=7&r=0&o=5&dpr=1.3&pid=1.7",
+        "character_name": "SpongeBob SquarePants"
+    },
+    {
+        "id": 3,
+        "image_url": "https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png",
+        "character_name": "Homer Simpson"
+    },
+    {
+        "id": 4,
+        "image_url": "https://upload.wikimedia.org/wikipedia/en/5/53/Scooby-Doo.png",
+        "character_name": "Scooby-Doo"
+    },
+    {
+        "id": 5,
+        "image_url": "https://upload.wikimedia.org/wikipedia/en/f/f6/Tom_Tom_and_Jerry.png",
+        "character_name": "Tom Cat"
+    },
+    {
+        "id": 6,
+        "image_url": "https://upload.wikimedia.org/wikipedia/en/2/2f/Jerry_Mouse.png",
+        "character_name": "Jerry Mouse"
+    },
+    {
+        "id": 7,
+        "image_url": "https://www.desicomments.com/wp-content/uploads/2017/02/Image-Of-Donald-Duck.jpg",
+        "character_name": "Donald Duck"
+    },
+    {
+        "id": 8,
+        "image_url": "https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png",
+        "character_name": "Bart Simpson"
+    },
+    {
+        "id": 9,
+        "image_url": "https://upload.wikimedia.org/wikipedia/en/1/17/Bugs_Bunny.svg",
+        "character_name": "Bugs Bunny"
+    },
+    {
+        "id": 10,
+        "image_url": "https://pngimg.com/uploads/pokemon/pokemon_PNG148.png",
+        "character_name": "Pikachu"
+    },
+    {
+        "id": 11,
+        "image_url": "https://vignette.wikia.nocookie.net/vsbattles/images/4/4f/PopEye.png/revision/latest?cb=20160307172307",
+        "character_name": "Popeye"
+    },
+    {
+        "id": 12,
+        "image_url": "https://www.nicepng.com/png/detail/53-534923_cartoon-character-png-fred-flintstone.png",
+        "character_name": "Fred Flintstone"
+    },
+    {
+        "id": 13,
+        "image_url": "https://www.cartoonpics.net/data/media/11/snoopy_friends.png",
+        "character_name": "Snoopy"
+    },
+    {
+        "id": 14,
+        "image_url": "https://images2.wikia.nocookie.net/__cb20130525054541/woodywoodpecker/images/2/26/Woody-woodpecker-tv-04-g.jpg",
+        "character_name": "Woody Woodpecker"
+    },
+    {
+        "id": 15,
+        "image_url": "https://vignette.wikia.nocookie.net/dominios-encantados/images/e/ea/WIKI_BUZ_LIGHTYEAR.jpg/revision/latest?cb=20141222161728&path-prefix=es",
+        "character_name": "Buzz Lightyear"
+    },
+    {
+        "id": 16,
+        "image_url": "https://images6.fanpop.com/image/photos/38800000/Elsa-frozen-38894629-960-960.jpg",
+        "character_name": "Elsa"
+    },
+    {
+        "id": 17,
+        "image_url": "https://upload.wikimedia.org/wikipedia/en/1/17/Batman-BenAffleck.jpg",
+        "character_name": "Batman"
+    }
+]
+const questionWrapper = document.querySelector(".question-wrapper");
+let timeInterval;
+
+function getRandomQuestion() {
+    const randomIndex = Math.floor(Math.random() * data.length);
+    return data[randomIndex];
+}
+function getRandomOption() {
+    const randomIndex = Math.floor(Math.random() * data.length);
+    return data[randomIndex].character_name;
+}
+
+function getRandomOptions(correctCharacter) {
+    let options = [correctCharacter];
+    while (options.length < 4) {
+        let option = getRandomOption();
+        if (!options.includes(option)) {
+            options.push(option);
+        }
+    }
+    return options.sort(() => Math.random() - 0.5); // shuffle the options list
+}
+
+function createResetBtnElement() {
+    let resetBtnElement = document.createElement('button');
+    resetBtnElement.setAttribute('class', 'bg-blue-700 font-bold px-6 py-2 rounded hover:bg-blue-600 text-white focus:ring-2 focus:ring-blue-300 border-2 border-white mr-4')
+    resetBtnElement.addEventListener('click', renderQuestion)
+    resetBtnElement.textContent = 'Reset'
+    resetBtnElement.style.pointerEvents = 'auto';
+    return resetBtnElement;
+}
+
+function createQuitBtnElement() {
+    let quitBtnElement = document.createElement('button');
+    quitBtnElement.setAttribute('class', 'bg-blue-700 font-bold px-6 py-2 rounded hover:bg-blue-600 text-white focus:ring-2 focus:ring-blue-300 border-2 border-blue-700')
+    quitBtnElement.addEventListener('click', () => {
+        window.location.href = 'index.html'
+    })
+    quitBtnElement.textContent = 'Quit'
+    quitBtnElement.style.pointerEvents = 'auto';
+    return quitBtnElement;
+}
+
+function createImageElement(url) {
+    let imgElement = document.createElement('img');
+    imgElement.setAttribute('class', "mx-auto my-8 h-40 w-40")
+    imgElement.setAttribute('src', url);
+
+    return imgElement;      
+}
+
+function createTimerElement() {
+    let timerElement = document.createElement('span');
+    timerElement.setAttribute('class', "text-blue-600 bg-white rounded px-2 py-1 font-bold")
+    let timeLeft = 10;
+    timerElement.textContent = `Time Left: ${timeLeft}s`
+    timeInterval = setInterval(() => {
+        timeLeft-=1
+        timerElement.textContent = `Time Left: ${timeLeft}s`
+        if (timeLeft==0) {
+            clearInterval(timeInterval)
+            renderQuestion()
+            return
+        }
+    }, 1000)  
+
+    return timerElement;
+}
+
+function createHeaderElement() {
+    let headerElement = document.createElement('h1');
+    headerElement.setAttribute('class', "text-gray-200 flex items-center p-2")
+    headerElement.innerHTML = `<span class='flex-1 text-left text-xl'>Guess who is this!</span>`
+    headerElement.appendChild(createTimerElement())
+
+    return headerElement;      
+}
+
+function createOptionsElement(index, option, correctOption) {
+    let optionElement = document.createElement('div');
+    optionElement.setAttribute('class', 'option w-full bg-white shadow-md rounded p-2 flex my-4 flex items-center cursor-pointer hover:bg-blue-100')
+    optionElement.innerHTML = `
+                <div class="no bg-blue-500 h-8 w-8 f rounded-full text-white">${index + 1}</div>
+                <div class="value text-xl flex-1 text-left pl-2">${option}</div>
+                <span class="text-lg check">&check;</span>
+                <span class="text-xl times">&times;</span>
+        `
+
+    optionElement.addEventListener('click', (e) => {
+        if (option === correctOption) {
+            optionElement.classList.add('correct')
+        } else {
+            optionElement.classList.add('wrong')
+        }
+        questionWrapper.style.pointerEvents = 'none';
+        clearInterval(timeInterval)
+    })
+    return optionElement;
+}
+
+function renderQuestion() {
+    questionWrapper.innerHTML = ``;
+    questionWrapper.classList.remove('hide');
+    questionWrapper.style.pointerEvents = 'auto';
+
+    const randomQuestion = getRandomQuestion();
+    const options = getRandomOptions(randomQuestion.character_name);
+
+    questionWrapper.appendChild(createHeaderElement())
+    questionWrapper.appendChild(createImageElement(randomQuestion.image_url))
+    options.map((option, index) => {
+        questionWrapper.appendChild(createOptionsElement(index, option, randomQuestion.character_name))
+    })
+    questionWrapper.appendChild(createResetBtnElement());
+    questionWrapper.appendChild(createQuitBtnElement());
+}
+
+document.addEventListener('DOMContentLoaded', renderQuestion);
diff --git a/Games/Cartoon_Character_Guessing_Game/style.css b/Games/Cartoon_Character_Guessing_Game/style.css
@@ -0,0 +1,46 @@
+.question-wrapper, .start {
+    max-width: 500px;
+    pointer-events: auto;
+}
+.display {
+    display: block;
+    pointer-events: auto;
+}
+.hide {
+    display: none;
+    pointer-events: none;
+}
+.f {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.check, .times {
+    display: none;
+}
+.option.correct {
+    background-color: #c1ffc1;
+    color: green;
+}
+.option.correct .no {
+    background-color: green;
+}
+.option.correct .no {
+    background-color: green;
+}
+.option.correct .check {
+    display: inline-block;
+}
+.option.wrong {
+    background-color: #ffc1c1;
+    color: rgb(181, 0, 0);
+}
+.option.wrong .no {
+    background-color: red;
+}
+.option.wrong .no {
+    background-color: red;
+}
+.option.wrong .times {
+    display: inline-block;
+}
diff --git a/README.md b/README.md
@@ -314,6 +314,8 @@ This repository also provides one such platforms where contributers come over an
 | [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme)                  |
 | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball)                  |
 |[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)|
+
+|[Cartoon character guessing game](https://github.com/kunjgit/GameZone/tree/main/Games/Cartoon_Character_Guessing_Game)|
 |[Carrom Board Game](https://github.com/kunjgit/GameZone/tree/main/Games/carrom)|
 | [Number_Recall_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Recall_Game)               |
 | [Hit_the_hamster] (https://github.com/kunjgit/GameZone/tree/main/Games/Hit_the_hamster)                |
@@ -330,6 +332,7 @@ This repository also provides one such platforms where contributers come over an
 |[Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly)|
 
 
+
  </center>
 
 <br>

diff --git a/assets/images/Cartoon_Character_Guessing_Game.png b/assets/images/Cartoon_Character_Guessing_Game.png