Introduction “Who’s that Pokemon?” should bring memories for most people. If you don’t know what it is about then I would advise you to go and lookup for the adventures of Ash Ketchum and his Pokemon friend Pikachu. In this post, I will show you how to create a simple Pokemon guessing game with HTML, CSS, and JavaScript. The game is completely based on “Who’s that Pokemon?” from the Pokemon anime series. You can remind yourself what it looks like . here It is a simple game, it has just below 70 lines of JavaScript code. . I will also teach you how you can deploy it for free. This game is a perfect project idea that you can improve and add to your portfolio. You can see how it looks and try it here I will not teach you much JavaScript in this post, you can learn it from many free tutorials available online for free. However, I will teach what necessary steps are needed to create a game like this. How to start? Let’s imagine that you got this as an assignment in school or as a task on your job. Somebody just showed you a video from above and you need to recreate that. How would you even start? Well, the first thing you need to check is what data you need to have. In this case, you need to have a list of Pokemon sprites together with the Pokemon name for every sprite. You usually get data like that either from some database, CSV, or excel files. Another option is to check is there any Pokemon that provides all that. API Luckily for us, there is a which is free and provides everything we need. On their website you can find API documentation and also you can test the API. We want to make only one API call when the application starts. Result of that call we would save to variable and use it during the entire duration. PokeAPI When using public free APIs always make sure you minimize the number of calls since that is creating some work on the server for which somebody is paying! Come up with an idea Now when you know that you have all the necessary data easily available you need to check what features your application needs to have. That is called functional requirements. You write them down and then you start implementing what you have written. So functional requirements for this application would be: get all Pokemon data from the API show the shadow of a sprite of a random Pokemon show the current streak of player’s correct guesses player needs to be able to make a guess of the Pokemon’s name by writing the name in the input field and pressing the Enter key if the player guessed correctly, increase the streak by one, otherwise reset the streak to zero after making a guess, reveal what Pokemon is by showing its sprite and printing its name repeat all steps above except the first step You can also make a list of non-functional requirements: find or create a background image that is similar to the background in anime find a font that is similar to the Pokemon font add some CSS style to the input form Implementation As you can see, the application is pretty simple. You show a random Pokemon’s sprite shadow, let the player make a guess, and then either increase or reset the streak counter. And for the last step show the Pokemon and after that get a new one. Open your favorite text editor. I like to use Visual Studio Code (VS Code). Create three files - “ ”, “ ”, and “ ”. Put all three files in the same folder. Open index.html and initialize it. In VS Code you can do it simply by typing ! and then pressing the tab key. If you are not using VS Code and don’t know how to initialize an HTML file you . After that just add links to CSS and JS files inside of head tags. index.html style.css action.js can check it here Inside the body tags, you need to add one image tag where sprites will be shown, one input field for the user to make a guess, and one span field to display the correct guess streak. Each of those tags should have a unique id property. We are done with HTML for now, here is what it should look like so far: <!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">
  <script src="action.js" defer></script>
  <link rel="stylesheet" href="style.css">
  <title>Who's that Pokemon?</title>
</head>
<body>
	<img id="sprite">
  <input type="text" placeholder="Who's that Pokemon?" id="guess">
  <br>
  <span id="streak">Streak: 0</span>
</body>
</html> Now let’s focus on the action.js file. There is the whole logic of the game. On GitHub, you can check where I commented on almost every line about what it does. That is why I am not going to explain line by line here. my action.js file As you can see in the file, PokeAPI with a base URL can take extra arguments “limit” and “offset”. That way you can choose what Pokemon you would like to get in API response and how many of them. I set offset to 0 and limit to 150 so I would always get only Pokemon from the first generation. You can change this however you like. As you can see in the image above - API will return an array of objects and each object contains the Pokemon name and URL which you can open to get more information about that Pokemon. Pokemon are sorted by their PokeDex number however inside an array their number is reduced by one because the array starts from zero. This is the only API call you need to make. In JavaScript, you can make a call to an API in several ways. I used the . Once the data is fetched from the API and saved to a variable, the game can start. fetch function The game starts with function. That function also is used to generate a new Pokemon every time the user makes a guess. So at the start of that function, some cleanup is required before generating new Pokemon. getPokemon() Generating a Pokemon is simple - get a random number, get the Pokemon name and sprite with that number and save it to variables. After that show Pokemon’s shadow by setting property to sprite URL and setting CSS property brightness to zero. img src After that application does nothing until the user presses Enter key. You should add an to the input field that will check if Enter key is pressed and if it is a function will be called. event listener checkGuess() function simply increases or resets streak value based on the user’s guess and calls function. updates the streak value on HTML, reveals Pokemon’s sprite, and shows Pokemon’s name. After 2 seconds, function will be called and the whole process will start again. And that is it. checkGuess() showPokemon() showPokemon() getPokemon() Styling Ok, now it is time to add some style to this game so it looks similar to that in the video. As you already know CSS is used for styling. You can check , it does not contain much. And I am pretty sure that you can style this much better than I did. After all, I am just a backend developer. my CSS file I found a background image which you can . I also found a font that is very similar to the Pokemon font. You can also . Setting background image is easy - inside the CSS file you need to add the property ‘background-image’ to the body tag with the path to the image. see and download here download it from my repository Sprite is always shown on the left side of the screen, while text and the Pokemon name are shown on the right side. To make such an effect which are just two columns you can use . Inside HTML you need to add a parent div with a class “row” and inside that div, you need to add two divs with a class “column”. flexbox Loading custom font is also simple in CSS. With @font-face you set the name of the font and the path to the font. After that, you can use that font with its name. Use that font to style “Who's that Pokemon?” on the right side of the screen and also Pokemon’s name when it is revealed. You can style the input field and streak however you like, I just added rounded corners to the input field and aligned text. I also changed the size. You can check what you like or you can use my value. The last thing you need to add is styling for mobile devices. It is added with the where you set the new CSS properties if the browser window is 500px wide or less. There you need to change that columns are shown as rows, reduce the size of fonts and increase the width of the input field. And that is it for styling. As I said, you can do it much better than I did, this is the bare minimum required to make it look similar to the video. @media rule Next steps In this tutorial, I showed you how to implement the “Who’s that Pokemon?” game with HTML, CSS, and JavaScript. If you are stuck on some part you can read comments inside the action.js file, or ask me here or on . You can also follow me there for the new posts. Twitter For practice, you can implement some new features to improve this game and make it unique. For example: add buttons that users can click to change generations of Pokemons to guess add a function that will play a voice “Who’s that Pokemon?” for the first time the game is loaded. Create a new variable that will show a high score. Add a timer that will countdown between getting new Pokemon There are so many ideas you can implement, that way you will get some new experience and you will learn new things. Once you are done, you can so you can show it in your portfolio or in your CV. Just follow . easily deploy this game for free this simple guide Also published . here

Amazon

Fetch

Mozilla

Twitter

YouTube

Choosing Your First Programming Language: A Beginners' Guide 

Meet the Writer: HackerNoon Contributor Marinsborg, Web Developer

Free programming tutorials and project ideas

Too Long; Didn't Read

Recreate a Simple Pokemon Game With 70 Lines of Javascript

Recreate a Simple Pokemon Game With 70 Lines of Javascript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Choosing Your First Programming Language: A Beginners' Guide

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

Windows Sticky Keys Exploit: The War Veteran That Never Dies

$PEPE, a Purple Lamborghini, and More: The Story Continues

Choosing Your First Programming Language: A Beginners' Guide

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

Windows Sticky Keys Exploit: The War Veteran That Never Dies

$PEPE, a Purple Lamborghini, and More: The Story Continues

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps