Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a Pokemon quiz game called “Who’s the Pokémon?”. To build this project we would need HTML, CSS, and Javascript. Let’s discover how to build this project in a few simple and easy-to-follow steps.
Video Tutorial:
For a better understanding of how we built the functionality of this project, I would advise you to watch the video below. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Who’s the Pokemon?’. Inside this folder, we have three files. These files are index.html, style.css, script.js, and the images of various Pokemon.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Who's that Pokemon</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="game-container hide"> <div class="header"> <div class="timer"></div> </div> <div class="container"></div> </div> <div class="score-container"> <div id="user-score"></div> <button id="start">Start</button> </div> <!-- Script --> <script src="script.js"></script> </body> </html>
CSS:
Next, we style our list using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient( #da2e2c 49%, #090029 49%, #090029 51%, #ffffff 51% ); } .score-container { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } #start { background-color: #ffffff; height: 6em; width: 6em; font-size: 1.8em; border: 0.4em solid #090029; border-radius: 50%; cursor: pointer; } .game-container { background-color: #ffffff; width: 100%; max-width: 31em; padding: 3em 1.5em; border: 0.6em solid #090029; border-radius: 0.5em; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } .timer span { font-weight: 600; } .header, .num { text-align: right; } .pokemon-image { display: block; margin: 3em auto 0 auto; } .options { display: flex; justify-content: center; gap: 0.5em; flex-wrap: wrap; } .options button { background-color: #ffffff; padding: 0.8em; border: 0.3em solid #090029; border-radius: 0.5em; box-shadow: 0 0.5em 0 0 #090029; cursor: pointer; } .options button:hover { box-shadow: none; transform: translateY(0.6em); } .nxt-btn-div { margin-top: 3em; display: flex; justify-content: flex-end; } .next-btn { cursor: pointer; background-color: #090029; color: #ffffff; border-radius: 0.5em; font-size: 1.2em; padding: 0.8em 3em; } .hide { display: none; } .options:disabled { border-color: #a0a0a0; color: #a0a0a0; box-shadow: 0 0.5em 0 0 #a0a0a0; cursor: not-allowed; } .options button.correct { background: #58cc5d; } .options button.incorrect { background: #eb5650; } .options button.correct, .options button.incorrect { color: #ffffff; border-color: #090029; box-shadow: 0 0.5em 0 0 #090029; } .score-container { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } #user-score { margin-bottom: 1em; color: #ffffff; }
Javascript:
Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.
The game consists of a series of questions with images of Pokemon, and the user has to choose the correct option from a list of options.
The steps included in creating this are:
- First, initialize all the images and their corresponding correct options in an array of objects and create an array of different options for the questions. Apart from this, declare variables and create references
- When the user clicks the start button the “startGame” function is called. It calls the “populateQuestions” function to populate 5 random. questions in an array and then calls the “cardGenerator” function to generate the UI for the game.
- “cardGenerator” further calls “populateOptions” to get all 4 options for our question and to shuffle options randomly it makes a call to the “randomShuffle” function, then it calls the “timerDisplay” function to start the countdown.
- When the user clicks an option the “checker” function is called which checks if the selected option is correct or not, updates the score, and calls the “nextQuestion” function which displays the next question. The “nextQuestion” function would also be called if the countdown ends or if the user clicks the next button.
//Initial References //Questions Or Images const questions = [ { image: "Alakazam.jpg", correct_option: "Alakazam", }, { image: "Arcanine.jpg", correct_option: "Arcanine", }, { image: "Bulbasaur.jpg", correct_option: "Bulbasaur", }, { image: "Cubone.jpg", correct_option: "Cubone", }, { image: "Ditto.jpg", correct_option: "Ditto", }, { image: "Gloom.jpg", correct_option: "Gloom", }, { image: "Gyarados.jpg", correct_option: "Gyarados", }, { image: "Hitmonlee.jpg", correct_option: "Hitmonlee", }, { image: "Horsea.jpg", correct_option: "Horsea", }, { image: "Koffing.jpg", correct_option: "Koffing", }, { image: "Mewtwo.jpg", correct_option: "Mewtwo", }, { image: "Seaking.jpg", correct_option: "Seaking", }, { image: "Tauros.jpg", correct_option: "Tauros", }, { image: "Venonat.jpg", correct_option: "Venonat", }, { image: "Victreebe.jpg", correct_option: "Victreebe", }, { image: "eevee.jpg", correct_option: "Eevee", }, ]; //All options const optionsArray = [ "Alakazam", "Arcanine", "Bulbasaur", "Cubone", "Ditto", "Gloom", "Gyarados", "Hitmonlee", "Horsea", "Koffing", "Mewtwo", "Pikachu", "Seaking", "Tauros", "Venonat", "Victreebe", "eevee", "Ivysaur", "Venusaur", "Charmander", "Charmeleon", "Charizard", "Squirtle", "Wartortle", "Blastoise", "Caterpie", "Metapod", "Butterfree", "Weedle", "Kakuna", "Beedrill", "Pidgey", "Pidgeotto", "Pidgeot", "Rattata", "Raticate", "Spearow", "Fearow", "Ekans", "Arbok", ]; const container = document.querySelector(".container"); const gameContainer = document.querySelector(".game-container"); const startButton = document.getElementById("start"); const scoreContainer = document.querySelector(".score-container"); const userScore = document.getElementById("user-score"); let timer = document.getElementsByClassName("timer")[0]; let nextBtn; let score, currentQuestion, finalQuestions; let countdown, count = 11; //Random value from array const randomValueGenerator = (array) => array[Math.floor(Math.random() * array.length)]; //Random shuffle array const randomShuffle = (array) => array.sort(() => 0.5 - Math.random()); //Start game const startGame = () => { //Select random 5 questions scoreContainer.classList.add("hide"); gameContainer.classList.remove("hide"); finalQuestions = populateQuestions(); score = 0; currentQuestion = 0; //Generate card for first question cardGenerator(finalQuestions[currentQuestion]); }; //Timer const timerDisplay = () => { countdown = setInterval(() => { count -= 1; timer.innerHTML = `<span>Time Left: </span>${count}s`; if (count == 0) { clearInterval(countdown); nextQuestion(); } }, 1000); }; //Create options const populateOptions = (correct_option) => { let arr = []; arr.push(correct_option); let optionsCount = 1; while (optionsCount < 4) { let randomvalue = randomValueGenerator(optionsArray); if (!arr.includes(randomvalue)) { arr.push(randomvalue); optionsCount += 1; } } return arr; }; //Choose random questions const populateQuestions = () => { let questionsCount = 0; let chosenObjects = []; let questionsBatch = []; //5 Questions while (questionsCount < 5) { let randomvalue = randomValueGenerator(questions); let index = questions.indexOf(randomvalue); if (!chosenObjects.includes(index)) { questionsBatch.push(randomvalue); chosenObjects.push(index); questionsCount += 1; } } return questionsBatch; }; //check selected answer const checker = (e) => { let userSolution = e.target.innerText; let options = document.querySelectorAll(".option"); if (userSolution === finalQuestions[currentQuestion].correct_option) { e.target.classList.add("correct"); score++; } else { e.target.classList.add("incorrect"); options.forEach((element) => { if (element.innerText == finalQuestions[currentQuestion].correct_option) { element.classList.add("correct"); } }); } clearInterval(countdown); //disable all options options.forEach((element) => { element.disabled = true; }); }; //Next question const nextQuestion = (e) => { //increment currentQuestion currentQuestion += 1; if (currentQuestion == finalQuestions.length) { gameContainer.classList.add("hide"); scoreContainer.classList.remove("hide"); startButton.innerText = `Restart`; userScore.innerHTML = "Your score is " + score + " out of " + currentQuestion; clearInterval(countdown); } else { cardGenerator(finalQuestions[currentQuestion]); } }; //Card UI const cardGenerator = (cardObject) => { const { image, correct_option } = cardObject; let options = randomShuffle(populateOptions(correct_option)); container.innerHTML = `<div class="quiz"> <p class="num"> ${currentQuestion + 1}/5 </p> <div class="questions"> <img class="pokemon-image" src="${image}"/> </div> <div class="options"> <button class="option" onclick="checker(event)">${options[0]} </button> <button class="option" onclick="checker(event)">${options[1]} </button> <button class="option" onclick="checker(event)">${options[2]} </button> <button class="option" onclick="checker(event)">${options[3]} </button> </div> <div class="nxt-btn-div"> <button class="next-btn" onclick="nextQuestion(event)">Next</button> </div> </div>`; //For timer count = 11; clearInterval(countdown); //Display timer timerDisplay(); }; startButton.addEventListener("click", startGame);
Go ahead and customize the project the way you like. If you have any queries, suggestions, or feedback comment below. Download the source code by clicking on the ‘Download Code’ button below.