diff --git a/Games/Guess_Who/README.md b/Games/Guess_Who/README.md new file mode 100644 index 0000000000..0d0d9a7a78 --- /dev/null +++ b/Games/Guess_Who/README.md @@ -0,0 +1,43 @@ +# **Guess Who - Gamer Edition** + +--- + +
+ +## **Description 📃** + +Welcome to Guess Who? Gaming Edition! Just like the real life board-game, your job is to find out which gaming character we are thinking of! + + +## **functionalities 🎮** + +You will be given a set of questions that you can ask on the control panel. Just click on the "?" button next to your desired question, and we will give you the answer. +You may ask as many questions as you would like, but the least you ask, the better your score! + Just like in the board-game, you can eliminate characters from the board! Just go to the desired character, and double-click on his/her card. + If you wish to add the desired character back, just double-click again on the respective card. +
+ +## **How to play? 🕹ī¸** + +You can make a guess at any point of the game! Just click on the "Guess Who?" button on the right panel, and click on your desired character. +If you would like to keep asking questions and not make the guess, you can simply click on the "Cancel" button on the right panel. +BUT THERE IS A CATCH! You only have 3 chances to guess. If you fail 3 times, you lose the game! + + +
+ +## **Screenshots 📸** + +
+![image](../../assets/images/Guess_Who.png) + +
+ +## **Working video 📹** + + + +
+ +## **Creator** +[Brad Didier](https://github.com/Deegee13244) \ No newline at end of file diff --git a/Games/Guess_Who/images/bowser.png b/Games/Guess_Who/images/bowser.png new file mode 100644 index 0000000000..6b8e4b9795 Binary files /dev/null and b/Games/Guess_Who/images/bowser.png differ diff --git a/Games/Guess_Who/images/cloud.png b/Games/Guess_Who/images/cloud.png new file mode 100644 index 0000000000..13b4aeb9b9 Binary files /dev/null and b/Games/Guess_Who/images/cloud.png differ diff --git a/Games/Guess_Who/images/donkeykong.png b/Games/Guess_Who/images/donkeykong.png new file mode 100644 index 0000000000..4a4e1dca39 Binary files /dev/null and b/Games/Guess_Who/images/donkeykong.png differ diff --git a/Games/Guess_Who/images/doom.png b/Games/Guess_Who/images/doom.png new file mode 100644 index 0000000000..1df9387942 Binary files /dev/null and b/Games/Guess_Who/images/doom.png differ diff --git a/Games/Guess_Who/images/ganon.png b/Games/Guess_Who/images/ganon.png new file mode 100644 index 0000000000..5641f61277 Binary files /dev/null and b/Games/Guess_Who/images/ganon.png differ diff --git a/Games/Guess_Who/images/inkling.png b/Games/Guess_Who/images/inkling.png new file mode 100644 index 0000000000..81e8a0e9a8 Binary files /dev/null and b/Games/Guess_Who/images/inkling.png differ diff --git a/Games/Guess_Who/images/jinx.png b/Games/Guess_Who/images/jinx.png new file mode 100644 index 0000000000..597ca99575 Binary files /dev/null and b/Games/Guess_Who/images/jinx.png differ diff --git a/Games/Guess_Who/images/joker.png b/Games/Guess_Who/images/joker.png new file mode 100644 index 0000000000..bf8388f148 Binary files /dev/null and b/Games/Guess_Who/images/joker.png differ diff --git a/Games/Guess_Who/images/kratos.png b/Games/Guess_Who/images/kratos.png new file mode 100644 index 0000000000..54491cde48 Binary files /dev/null and b/Games/Guess_Who/images/kratos.png differ diff --git a/Games/Guess_Who/images/lara.png b/Games/Guess_Who/images/lara.png new file mode 100644 index 0000000000..e102e35547 Binary files /dev/null and b/Games/Guess_Who/images/lara.png differ diff --git a/Games/Guess_Who/images/leon.png b/Games/Guess_Who/images/leon.png new file mode 100644 index 0000000000..c14b411c04 Binary files /dev/null and b/Games/Guess_Who/images/leon.png differ diff --git a/Games/Guess_Who/images/link.png b/Games/Guess_Who/images/link.png new file mode 100644 index 0000000000..7cfeeb5f45 Binary files /dev/null and b/Games/Guess_Who/images/link.png differ diff --git a/Games/Guess_Who/images/logo-og.png b/Games/Guess_Who/images/logo-og.png new file mode 100644 index 0000000000..43aeabb852 Binary files /dev/null and b/Games/Guess_Who/images/logo-og.png differ diff --git a/Games/Guess_Who/images/luigi.png b/Games/Guess_Who/images/luigi.png new file mode 100644 index 0000000000..0724a9355d Binary files /dev/null and b/Games/Guess_Who/images/luigi.png differ diff --git a/Games/Guess_Who/images/mario.png b/Games/Guess_Who/images/mario.png new file mode 100644 index 0000000000..f544c061fd Binary files /dev/null and b/Games/Guess_Who/images/mario.png differ diff --git a/Games/Guess_Who/images/masterchief.png b/Games/Guess_Who/images/masterchief.png new file mode 100644 index 0000000000..650cd593fd Binary files /dev/null and b/Games/Guess_Who/images/masterchief.png differ diff --git a/Games/Guess_Who/images/nathan.png b/Games/Guess_Who/images/nathan.png new file mode 100644 index 0000000000..a418bf38ad Binary files /dev/null and b/Games/Guess_Who/images/nathan.png differ diff --git a/Games/Guess_Who/images/pacman.png b/Games/Guess_Who/images/pacman.png new file mode 100644 index 0000000000..7fed42f95b Binary files /dev/null and b/Games/Guess_Who/images/pacman.png differ diff --git a/Games/Guess_Who/images/pikachu.png b/Games/Guess_Who/images/pikachu.png new file mode 100644 index 0000000000..c0c4cdfa22 Binary files /dev/null and b/Games/Guess_Who/images/pikachu.png differ diff --git a/Games/Guess_Who/images/ryu.png b/Games/Guess_Who/images/ryu.png new file mode 100644 index 0000000000..ea76fee4d0 Binary files /dev/null and b/Games/Guess_Who/images/ryu.png differ diff --git a/Games/Guess_Who/images/samus.png b/Games/Guess_Who/images/samus.png new file mode 100644 index 0000000000..bb62c5cffc Binary files /dev/null and b/Games/Guess_Who/images/samus.png differ diff --git a/Games/Guess_Who/images/snake.png b/Games/Guess_Who/images/snake.png new file mode 100644 index 0000000000..9e1fe21988 Binary files /dev/null and b/Games/Guess_Who/images/snake.png differ diff --git a/Games/Guess_Who/images/steve.png b/Games/Guess_Who/images/steve.png new file mode 100644 index 0000000000..1160a4e32f Binary files /dev/null and b/Games/Guess_Who/images/steve.png differ diff --git a/Games/Guess_Who/images/tracer.png b/Games/Guess_Who/images/tracer.png new file mode 100644 index 0000000000..7ba3da44f8 Binary files /dev/null and b/Games/Guess_Who/images/tracer.png differ diff --git a/Games/Guess_Who/images/zelda.png b/Games/Guess_Who/images/zelda.png new file mode 100644 index 0000000000..3eb3e9b8dc Binary files /dev/null and b/Games/Guess_Who/images/zelda.png differ diff --git a/Games/Guess_Who/index.html b/Games/Guess_Who/index.html new file mode 100644 index 0000000000..a207003f73 --- /dev/null +++ b/Games/Guess_Who/index.html @@ -0,0 +1,507 @@ + + + + + + + Guess Who + + + + + + +
+
+ +
+ +
+
+ +
+
+ +
+ +
+
+
X
+
Wrong guess.
Try again!
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
Mario
+
+
+
+ +
+
Luigi
+
+
+
+ +
+
Bowser
+
+
+
+ +
+
Cloud
+
+
+
+ +
+
Donkey Kong
+
+
+
+ +
+
Doom Slayer
+
+
+
+
+
+
Ganondorf
+
+
+
+ +
+
Inkling
+
+
+
+ +
+
Jinx
+
+
+
+ +
+
Joker
+
+
+
+ +
+
Kratos
+
+
+
+ +
+
Lara Croft
+
+
+
+
+
+ +
+
Leon Kennedy
+
+ +
+
+ +
+
Master Chief
+
+
+
+ +
+
Nathan Drake
+
+
+
+ +
+
Pacman
+
+
+
+ +
+
Pikachu
+
+
+
+
+
+ +
+
Ryu
+
+
+
+ +
+
Samus
+
+
+
+ +
+
Snake
+
+
+
+ +
+
Steve
+
+
+
+ +
+
Tracer
+
+
+
+ +
+
Zelda
+
+
+
+
+ +
+
+ Guesses Left: 3 +
+
+ Questions Asked: 0 +
+
+
+ Ask a question! +
+ +
+
+
+ Is Character male? +
+
+ +
+
+
+
+ Is Character female? +
+
+ +
+
+
+
+ Is Character human? +
+
+ +
+
+
+
+ Is Character primarily red? +
+
+ +
+
+
+
+ Is Character primarily green? +
+
+ +
+
+
+
+ Is Character primarily yellow? +
+
+ +
+
+
+
+ Is Character primarily gray? +
+
+ +
+
+
+
+ Is Character primarily brown? +
+
+ +
+
+
+
+ Is Character primarily orange? +
+
+ +
+
+
+
+ Is Character primarily white? +
+
+ +
+
+
+
+ Is Character primarily purple? +
+
+ +
+
+
+
+ Is Character primarily blue? +
+
+ +
+
+
+
+ Is Character primarily black? +
+
+ +
+
+
+
+ Does Character belong to Nintendo? +
+
+ +
+
+
+
+ Does Character belong to Square Enix? +
+
+ +
+
+
+
+ Does Character belong to Bethesda? +
+
+ +
+
+
+
+ Does Character belong to Riot Games? +
+
+ +
+
+
+
+ Does Character belong to Sega? +
+
+ +
+
+
+
+ Does Character belong to Sony? +
+
+ +
+
+
+
+ Does Character belong to Capcom? +
+
+ +
+
+
+
+ Does Character belong to Microsoft? +
+
+ +
+
+
+
+ Does Character belong to Bandai Namco? +
+
+ +
+
+
+
+ Does Character belong to Konami? +
+
+ +
+
+
+
+ Does Character belong to Blizzard? +
+
+ +
+
+
+
+ Is Characters's hair blond? +
+
+ +
+
+
+
+ Is Characters's hair brown? +
+
+ +
+
+
+
+ Is Characters's hair red? +
+
+ +
+
+
+
+ Is Characters's hair black? +
+
+ +
+
+
+
+ Is Characters's hair orange? +
+
+ +
+
+
+
+ Is Characters's hair blue? +
+
+ +
+
+
+
+ Is Character bald? +
+
+ +
+
+
+
+ Answer: ??? +
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/Games/Guess_Who/script.js b/Games/Guess_Who/script.js new file mode 100644 index 0000000000..afd220e38f --- /dev/null +++ b/Games/Guess_Who/script.js @@ -0,0 +1,560 @@ + +/* ====================== +CACHED DOM NOTES +=========================*/ + +const body = document.querySelector("body") +const getStartedBtn = document.querySelector("#get-started") +const startGameBtn = document.querySelector("#start-game") +const board = document.querySelector("#chris-board") +const gameConsole = document.querySelector("#game-controls") +const guessCounter = document.querySelector("#guess-count > span") +const questionCounter = document.querySelector("#question-count > span") +const menu = document.querySelector(".menu") +const tutorial = document.querySelector("#modal-textbox") +const characters = document.querySelectorAll(".square") +const askButtons = document.querySelectorAll(".ask button") +const answers = document.querySelector("#answers > span") +const makeGuessBtn = document.getElementById("make-guess") +const cancelBtn = document.getElementById("cancel-guess") +const resultTitle = document.getElementById("result-title") +const scoreNumber = document.getElementById("score-number") +const scoreText = document.getElementById("score-text") +const stars = document.getElementById("stars") +const playAgain = document.getElementById("play-again") +const closeTryModal = document.getElementById("close-modal") +const tryModal = document.getElementById("try-textbox") +const updatesModal = document.getElementById("updates-textbox") +const modalBackground = document.querySelector(".modal-background") + +console.log(makeGuessBtn) + +/* ====================== +CLASSES +=========================*/ +class Character{ + constructor(lastName, sex, human = true, color, brand, hairColor){ + this.lastName = lastName + this.sex = sex + this.human = human + this.color = color + this.brand = brand + this.hairColor = hairColor + } + +} + +// Define a class named Player +class Player { + // Constructor method with default values for guess count and question count + constructor(guessCount = 3, questionCount = 0) { + // Initialize instance variables + this.guessCount = guessCount; // Number of guesses allowed + this.questionCount = questionCount; // Number of questions answered + // Array of game character names + this.currentChars = [ + "mario", "luigi", "bowser", "cloud", "donkeykong", "doom", + "ganon", "inkling", "jinx", "joker", "kratos", "lara", + "leon", "link", "masterchief", "nathan", "pacman", "pikachu", + "ryu", "samus", "snake", "steve", "tracer", "zelda", + ]; + } + + // Method to update guess count and update corresponding HTML element + updateGuessCount() { + this.guessCount--; // Decrement guess count + guessCounter.textContent = this.guessCount; // Update guess counter in HTML + } + + // Method to update question count and update corresponding HTML element + updateQuestionCount() { + this.questionCount++; // Increment question count + questionCounter.textContent = this.questionCount; // Update question counter in HTML + } + + // Method to handle win scenario + win() { + // Update result and score display in HTML + resultTitle.textContent = "Congrats! You won!"; + scoreText.textContent = "You sure know your game characters!"; + this.checkScore(); // Check and update score + this.checkStars(); // Check and update star rating + // Display modal + modalBackground.style.display = "block"; + updatesModal.style.display = "block"; + } + + // Method to handle lose scenario + lose() { + // Update result and score display in HTML + resultTitle.textContent = "You Lost"; + scoreText.textContent = "Better luck next time."; + this.checkScore(); // Check and update score + stars.textContent = "☆☆☆"; // Reset star rating + // Display modal + modalBackground.style.display = "block"; + updatesModal.style.display = "block"; + } + + // Method to calculate and display score based on question count + checkScore() { + scoreNumber.textContent = this.questionCount * 1000; // Calculate score and update HTML + } + + // Method to calculate and display star rating based on question count + checkStars() { + if (this.questionCount < 6) { + stars.textContent = "★★★"; // 3 stars for fewer questions + } else if (this.questionCount >= 6 && this.questionCount <= 11) { + stars.textContent = "★★☆"; // 2 stars for moderate questions + } else if (this.questionCount >= 12 && this.questionCount <= 16) { + stars.textContent = "★☆☆"; // 1 star for more questions + } else { + stars.textContent = "☆☆☆"; // No stars for too many questions + } + } +} + +/* ====================== +GLOBAL VARS +=========================*/ +let computedChars = "" + +let player = new Player() +const chrisList = [ + new Character("mario", "male", true, ["red"], "Nintendo", "brunette"), + new Character("luigi", "male", true, ["green"], "Nintendo", "brunette"), + new Character("bowser", "male", false, ["yellow"], "Nintendo", "red"), + new Character("cloud", "male", true, ["gray"], "Square Enix", "blond"), + new Character("donkeykong", "male", false, ["brown"], "Nintendo", "brunette"), + new Character("doom", "male", true, ["brown", "green"], "Bethesda", "black"), + new Character("ganon", "male", true, ["brown", "red"], "Nintendo", "red"), + new Character("inkling", "female", false, ["orange", "white"], "Nintendo", "orange"), + new Character("jinx", "female", true, ["purple, blue"], "Riot Games", "blue"), + new Character("joker", "male", true, ["black"], "Sega", "black"), + new Character("kratos", "male", false, ["red", "white"], "Sony", "bald"), + new Character("lara", "female", true, ["white", "brown"], "Square Enix", "brunette"), + new Character("leon", "male", true,["blue"], "Capcom", "brunette"), + new Character("link", "male", true, ["green", "blue"], "Nintendo", "brunette"), + new Character("masterchief", "male", true, ["green"], "Microsoft", "black"), + new Character("nathan", "male", true, ["gray, brown"], "Sony", "brunette"), + new Character("pacman", "male", false, ["yellow"], "Bandai Namco", "bald"), + new Character("pikachu", "male", false, ["yellow"], "Nintendo", "bald"), + new Character("ryu", "male", true, ["white", "red"], "Capcom", "black"), + new Character("samus", "female", true, ["orange", "red"], "Nintendo", "blond"), + new Character("steve", "male", true, ["blue", "white"], "Microsoft", "brunette"), + new Character("snake", "male", true, ["gray"], "Konami", "brunette"), + new Character("tracer", "female", true, ["orange"], "Blizzard", "black"), + new Character("zelda", "female", true, ["white", "purple"], "Nintendo", "brunette") +] + +console.log(chrisList) +console.log(player) +/* ============================= +FUNCTIONS +============================= */ +const startTutorial = () => { + menu.style.display = "none" + tutorial.style.display = "block" +} + +const startGame = () => { + computedChars = randomizeChars() + console.log(computedChars) + setupGame() +} + +const setupGame = () =>{ + tutorial.style.display = "none" + board.style.display = "block" + gameConsole.style.display = "block" + +} + +const randomizeChars = () =>{ + console.log(Math.floor(Math.random() * 24)) + return chrisList[Math.floor(Math.random() * 24)]; +} + +const makeGuess = () => { + // Display cancel button + cancelBtn.style.display = "block"; + + // Iterate over each character element + characters.forEach((character) => { + // Get the character name element + let characterName = character.querySelector(".name"); + + // Check if the character ID is included in the player's current characters + if (player.currentChars.includes(character.id)) { + // Add an event listener to the character element + character.addEventListener('click', function () { + // Update guess count for the player + player.updateGuessCount(); + + // Check if the clicked character matches the last name of the computed characters + if (computedChars.lastName !== character.id && player.guessCount === 0) { + console.log("you lose"); + // Player loses the game + player.lose(); + } else if (computedChars.lastName === character.id) { + console.log("You win"); + // Player wins the game + player.win(); + } else if (computedChars.lastName !== character.id && player.guessCount !== 0) { + // Display try again modal if the character is not correct and guesses are left + tryModal.style.display = "block"; + modalBackground.style.display = "block"; + } + }); + } else { + // Style characters that are not included in player's current characters + character.style.backgroundColor = "#c7c7c7"; + character.classList.add("no-click"); + } + }); +}; + + +const cancelGuess = () => { + + cancelBtn.style.display = "none" + characters.forEach((character) =>{ + + if(player.currentChars.includes(character.id)){ + } + else{ + character.classList.remove("no-click") + character.style.backgroundColor = "#d3232c" + character.style.color = "aliceblue" + } + + }) +} + +const closeModal = () => { + tryModal.style.display = "none" + modalBackground.style.display = "none" +} + +const restartGame = () => { + window.location.reload(); +} + +/* ============================= +EVENT LISTENERS +============================= */ + +closeTryModal.addEventListener("click", closeModal) +getStartedBtn.addEventListener("click", startTutorial) + +startGameBtn.addEventListener("click", startGame) + +makeGuessBtn.addEventListener("click", makeGuess) + +cancelBtn.addEventListener("click", cancelGuess) + +playAgain.addEventListener("click", restartGame) + + +characters.forEach((character) =>{ + let charactername = character.querySelector(".name") + if(player.currentChars.includes(character.id)){ + character.addEventListener('mouseenter', function (){ + charactername.style.backgroundColor = "#094f8f" + charactername.style.color = "aliceblue" + }) + character.addEventListener('mouseleave', function (){ + charactername.style.backgroundColor = "aliceblue" + charactername.style.color = "#094f8f" + }) + + } + character.addEventListener('dblclick', function(){ + + let selectedChar = document.getElementById(character.id) + let index = player.currentChars.indexOf(character.id) + + let characterName = selectedChar.querySelector(".name") + let characterImage = selectedChar.querySelector(".image") + + + if (characterImage.style.display === "none"){ + characterImage.style.display = "initial" + characterName.style.backgroundColor = "aliceblue" + characterName.style.color = "#094f8f" + player.currentChars.push(character.id) + + + } + else { + characterImage.style.display = "none" + player.currentChars.splice(index,1) + + } + + }) +}) + + +//Question logic below +askButtons.forEach((question) =>{ + question.addEventListener('click', function(){ + + let selectedQuestion = question.id + let color = computedChars.color + let selectedButton = document.getElementById(selectedQuestion) + + selectedButton.disabled = true + selectedButton.style.backgroundColor = "#c7c7c7" + selectedButton.style.color = "#c7c7c7" + player.updateQuestionCount() + + + switch(selectedQuestion){ + case "female": + if(computedChars.sex === "female"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + + break + case "male": + if(computedChars.sex === "male"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "human": + if(computedChars.human){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "red": + if(color.includes("red")){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "green": + if(color.includes("green")){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "yellow": + if(color.includes("yellow")){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "gray": + if(color.includes("gray")){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "brown": + if(color.includes("brown")){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "orange": + if(color.includes("orange")){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "purple": + if(color.includes("purple")){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "blue": + if(color.includes("blue")){ + answers.textContent = "Yes" + } + else { + answers.textContent = "No!" + } + case "black": + if(color.includes("black")){ + answers.textContent = "Yes" + } + else { + answers.textContent = "No!" + } + case "white": + if(color.includes("white")){ + answers.textContent = "Yes" + } + else { + answers.textContent = "No!" + } + case "Nintendo": + if(computedChars.brand === "Nintendo"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Square Enix": + if(computedChars.brand === "Square Enix"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Bethesda": + if(computedChars.brand === "Bethesda"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Riot Games": + if(computedChars.brand === "Riot Games"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Sega": + if(computedChars.brand === "Sega"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Sony": + if(computedChars.brand === "Sony"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Capcom": + if(computedChars.brand === "Capcom"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Micrsoft": + if(computedChars.brand === "Microsoft"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Bandai Namco": + if(computedChars.brand === "Bandai Namco"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Konami": + if(computedChars.brand === "Konami"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "Blizzard": + if(computedChars.brand === "Blizzard"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "blond": + console.log("blond") + + if(computedChars.hairColor === "blond"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "brunette": + console.log("brunette") + if(computedChars.hairColor === "brunette"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "red": + console.log("red") + if(computedChars.hairColor === "red"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "black": + if(computedChars.hairColor === "black"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "orange": + if(computedChars.hairColor === "orange"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + case "bald": + if(computedChars.hairColor === "bald"){ + answers.textContent = "Yes" + } + else{ + answers.textContent = "No!" + } + break + } + + }) +}) \ No newline at end of file diff --git a/Games/Guess_Who/style.css b/Games/Guess_Who/style.css new file mode 100644 index 0000000000..9722f3d855 --- /dev/null +++ b/Games/Guess_Who/style.css @@ -0,0 +1,359 @@ +body{ + background-color: #FFBF00; + font-size: 14px; + font-family: 'Montserrat', sans-serif; +} + +.instruction{ + counter-reset: my-awesome-counter; + } +.instruction p { + counter-increment: my-awesome-counter; + } +.instruction p::before { + content: counter(my-awesome-counter) ". "; + color: red; + font-size: 18px; + font-weight: bold; + font-family: Jacoby; + } +.welcome{ + justify-content: center; + /* margin-top:150px; */ +} +.welcome img{ + margin-top: 150px; +} + +.instructions{ + display: none; + justify-content: center; +} +.updates{ + justify-content: center; +} +.modal-background{ + display: none; + background-color: rgba(0, 0, 0, 0.4); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 1; + /*This puts our modal in front of the body (which has a default z-index setting of `0`*/ + overflow: auto; + +} +.titles{ + font-family: Jacoby; + color: #d3232c; + /* border: solid black 2px; */ + font-size: 18px; + text-align: center; + width: 100%; + /* padding-top: 6px; */ + height: 3%; + margin-top: 5%; + + justify-content: center; + +} + +#modal-textbox{ + display: none; + padding: 20px;; + background-color: white; + box-shadow: 0px 0px 2px 2px #00222222; + height: 100%; + width: 70%; + border-radius: 5px; + text-align: center; +} + +#updates-textbox, #try-textbox{ + background-color: white; + box-shadow: 0px 0px 2px 2px #00222222; + width: 50%; + + position: fixed; /* or absolute */ + top: 20%; + left: 25%; + right: 25%; + border-radius: 5px; + text-align: center; + +} +#updates-textbox{ + height: 250px; + display: none; +} +#try-textbox{ + height: 200px; + display: none; + +} +#score-total{ + font-size: 30px; + font-family: Jacoby; +} + +#close-modal{ + text-align: right; + padding: 5px; + color: #d3232c; + font-size: 20px; + font-family: Jacoby; + cursor: pointer; + padding: 10px; +} + +#chris-board,#game-controls{ + /* border: solid black 2px; */ + border-radius: 5px; + display: none; + height: 720px; + +} + +#chris-board{ + flex-basis: 66%; + margin-right: 1%; + flex-direction: column; +} + +#game-controls{ + flex-basis: 33%; + flex-direction: column; + box-shadow: 0px 0px 4px 4px #00222222; + background-color: aliceblue; +} +#logo{ + width: 90%; + height: 25%; + margin-top: 5%; + margin-left: 5%; + margin-right: 5%; +} + +#logo img{ + width:100%; + max-height: 100%; + justify-content: center; +} + +.player-stats, #answers{ + flex-direction: column; + font-size: 18px; + width: 95%; + height: 6%; + margin-left: 2.5%; + margin-right: 2.5%; +} + +#guess-count, #question-count, #answers{ + font-family: Jacoby; + color: #d3232c; +} + +#guess-count > span, #question-count > span, #answers > span{ + justify-content: right; + color: black; +} + +#answers{ + text-align: center; + padding-top: 2%; + height: 4%; +} +.no-click{ + pointer-events: none; +} + +.questions{ + flex-direction: column; + box-shadow: 0px 0px 2px 2px #00222222; + width: 95%; + margin-left:2.5%; + margin-right:2.5%; + margin-top: 2%; + display: block; + border-radius: 5px; + overflow: auto; + height: 30%; +} +.questions::-webkit-scrollbar { + width: 5px; + height: 8px; + background-color: #f9f9f9; + border-radius: 5px; + } + + .questions::-webkit-scrollbar-thumb { + background-color: #c7c7c7; + border-radius: 5px; + height: 2px; + } + +.row{ + margin-bottom: .5%; +} +.row:first-of-type{ + margin-top: .5%; +} +.square{ + /* border: solid black 2px; */ + width: 25%; + height: 300px; + cursor: pointer; + margin-right: .5%; + flex-direction: column; + border-radius: 5px; + box-shadow: 0px 0px 2px 2px #00222222; + background-color: #d3232c; +} + +.square:first-of-type{ + margin-left: .5%; + +} + +.image{ + /* height: 79.5%; */ + height: 78%; + width: 100%; + /* background-color: blue; */ + +} +.image img{ + height: 100%; + width: 100%; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +.name{ + /* height: 20.5%; */ + height:21%; + max-width: 100%; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + /* border:solid pink 2px; */ + text-align:center; + justify-content: center; + /* font-size: 1.25vw; */ + background-color: aliceblue; + font-family: Jacoby; + color: #094f8f +} +.container{ + display: flex; +} + +.text{ + width:86%; + padding-top: 5px; + padding-bottom: 5px; + /* border: solid black 2px; */ + font-family: 12px; + padding-left:2px; + +} +.question{ + flex-direction: row; + /* flex-wrap: wrap; */ +} +.question:nth-child(odd){ + background-color: #f1f1f1; + +} +.ask{ + width: 14%; + /* border: solid black 2px; */ +} + +button{ + margin-top: 10px; + border-color: transparent; + cursor: pointer; + background-color: #094f8f; + color: #d3232c; + font-family: Jacoby; + box-shadow: 0px 0px 2px 2px #00222222; + text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; +} + +.ask button{ + margin-top: 0px; + border-radius: 50%; +} + +.guess{ + width: 95%; + height: 6%; + margin-left: 2.5%; + margin-right: 2.5%; + justify-content: center; + /* border: solid red 2px; */ + margin-top: 20px; + +} +.guess button{ + width: 100%; + border-radius: 5px; + font-size: 24px; + +} +#cancel-guess{ + background-color:#d3232c; + color: white; + text-shadow: none; + display: none; + +} +.start{ + height: 15%; + width: 95%; + margin-left: 2.5%; + margin-right: 2.5%; + justify-content: center; + /* border: solid red 2px; */ + margin-top: 10%; + /* border: solid black 2px; */ +} +.start button{ + width: 100%; + border-radius: 5px; + font-size: 28px; + background-color: whitesmoke; + color: #d3232c; + +} +#start-game,#play-again{ + width: 95%; + height: 10%; + border-radius: 5px; + font-size: 24px; +} +#tutorial-title{ + color: #d3232c; + font-family: Jacoby; + font-size: 30px; +} +#result-title, #try-title{ + color: #d3232c; + font-family: Jacoby; + font-size: 40px; + padding: 10px; +} + +#score-number{ + color: #094f8f; + font-family: Jacoby; + font-size: 50px; + +} + +#score-text{ + font-size: 20px; + +} \ No newline at end of file diff --git a/README.md b/README.md index 50a1886300..83eff7f26f 100644 --- a/README.md +++ b/README.md @@ -185,7 +185,7 @@ This repository also provides one such platforms where contributers come over an | [Find Extra Cube](https://github.com/kunjgit/GameZone/tree/main/Games/Find_Extra_Cube) | [PathPlex](https://github.com/kunjgit/GameZone/tree/main/Games/Pathplex) | [CSS Select](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Select) | [Squid](https://github.com/kunjgit/GameZone/tree/main/Games/Squid_Game) | [CSS Crossword](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Crossword) | | [CSS Select](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Select) | [Squid](https://github.com/kunjgit/GameZone/tree/main/Games/Squid_Game) | [Flip Coin](https://github.com/kunjgit/GameZone/tree/main/Games/Flip_Coin) | [Witty Word Quest](https://github.com/kunjgit/GameZone/tree/main/Games/witty_word_quest) | [Typing Game](https://github.com/Ishan-77/GameZone/tree/main/Games/Typing_Game) | | [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz) | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga) | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road) | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero) | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner) | -| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | | | | +| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | | | diff --git a/assets/images/Guess_Who.png b/assets/images/Guess_Who.png new file mode 100644 index 0000000000..be9d3d8782 Binary files /dev/null and b/assets/images/Guess_Who.png differ