“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.
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!
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:
You can also make a list of non-functional requirements:
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.
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() 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.
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.
For practice, you can implement some new features to improve this game and make it unique. For example:
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.