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. You can see how it looks and try it here. 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.
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 API that provides all that.
Luckily for us, there is a PokeAPI 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.
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 - “index.html”, “style.css”, and “action.js”. 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 can check it here. After that just add links to CSS and JS files inside of head tags.
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>
<!--For implementation details visit marinsborg.com-->
<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 my action.js file where I commented on almost every line about what it does. That is why I am not going to explain line by line here.
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 fetch function. Once the data is fetched from the API and saved to a variable, the game can start.
The game starts with getPokemon() 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.
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 img src property to sprite URL and setting CSS property brightness to zero.
After that application does nothing until the user presses Enter key. You should add an event listener to the input field that will check if Enter key is pressed and if it is a function checkGuess() will be called.
checkGuess() function simply increases or resets streak value based on the user’s guess and calls showPokemon() function. showPokemon() updates the streak value on HTML, reveals Pokemon’s sprite, and shows Pokemon’s name. After 2 seconds, getPokemon() function will be called and the whole process will start again. And that is it.
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 my CSS file, 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.
I found a background image which you can see and download here. I also found a font that is very similar to the Pokemon font. You can also download it from my repository. 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.
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 flexbox. 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”.
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 @media rule 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.
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 Twitter. You can also follow me there for the new posts.
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 easily deploy this game for free so you can show it in your portfolio or in your CV. Just follow this simple guide.
Also published here.
