### Title: A Vanilla JS Pokémon Game: Who＇s That Pokémon with PokAPI
### Description:
Discover how to create a simple yet engaging ＂Who＇s That Pokémon＂ game using pure JavaScript and the PokéAPI. This article guides you through building a fun, interactive game where players guess which Pokémon is being displayed based on clues provided by the game.
### Content:
#### Introduction
In this article, we will explore the creation of a ＂Who＇s That Pokémon＂ game using only vanilla JavaScript and the PokéAPI. The game aims to be a delightful way to engage with Pokémon enthusiasts, providing a casual and educational experience in JavaScript programming.
#### Setting Up the Environment
To start, you＇ll need a basic understanding of HTML, CSS, and JavaScript. We will use the following elements in our game:
- An HTML structure for the game interface.
- Basic CSS styling for visual appeal.
- Pure JavaScript for the game logic.
First, let＇s set up the basic HTML structure. Create an `index.html` file and add the following code:
```html
＜!DOCTYPE html＞
＜html lang=＂en＂＞
＜head＞
＜meta charset=＂UTF-8＂＞
＜meta name=＂viewport＂ content=＂width=device-width, initial-scale=1.0＂＞
＜title＞Who＇s That Pokémon＜/title＞
＜link rel=＂stylesheet＂ href=＂styles.css＂＞
＜/head＞
＜body＞
＜div id=＂game-container＂＞
＜h1＞Who＇s That Pokémon?＜/h1＞
＜img id=＂pokemon-image＂ src=＂＂ alt=＂Pokemon＂＞
＜button id=＂guess-button＂＞Guess!＜/button＞
＜p id=＂clue＂＞＜/p＞
＜p id=＂score＂＞Score: 0＜/p＞
＜/div＞
＜script src=＂script.js＂＞＜/script＞
＜/body＞
＜/html＞
```
Next, let＇s add some basic CSS styles to make the game look appealing. Create a `styles.css` file and include the following:
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#game-container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#pokemon-image {
max-width: 300px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#score {
font-weight: bold;
}
```
Now, let＇s write the JavaScript logic to fetch Pokémon data from the PokéAPI and implement the game functionality. Create a `script.js` file and include the following code:
```javascript
// Function to fetch Pokémon data from the PokéAPI
async function fetchPokémon() {
const response = await fetch(＇https://pokeapi.co/api/v2/pokemon?limit=151＇);
const data = await response.json();
return data.results;
}
// Function to get a random Pokémon from the list
function getRandomPokémon() {
const pokémonList = fetchPokémon();
return pokémonList[Math.floor(Math.random() * pokémonList.length)];
}
// Function to display Pokémon image and clue
function displayPokémon(pokémon) {
const url = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokémon.url.split(＇/＇).pop()}.png`;
document.getElementById(＇pokemon-image＇).src = url;
const type = pokémon.types[0].type.name;
const nickname = pokémon.name;
document.getElementById(＇clue＇).textContent = `It＇s a ${type} Pokémon! (${nickname})`;
// Reset score
document.getElementById(＇score＇).textContent = ＇Score: 0＇;
}
// Function to handle button click event
function handleButtonClick() {
const randomPokémon = getRandomPokémon();
displayPokémon(randomPokémon);
// Logic for guessing the Pokémon (for simplicity, just increment score)
document.getElementById(＇score＇).textContent = parseInt(document.getElementById(＇score＇).textContent) + 1;
}
// Event listener for the guess button
document.getElementById(＇guess-button＇).addEventListener(＇click＇, handleButtonClick);
```
#### Conclusion
With these steps, you have built a simple ＂Who＇s That Pokémon＂ game using vanilla JavaScript and the PokéAPI. The game randomly selects a Pokémon, displays it, and provides a clue. Players can guess the Pokémon and their score is incremented each time they correctly identify one.
Feel free to enhance the game by adding more features such as multiple rounds, a leaderboard, or a feature to reveal the correct answer after a certain number of guesses. Happy coding!
#### Additional Tips
- Customize the game interface further with additional CSS styles.
- Implement a more sophisticated scoring system, like deducting points for incorrect guesses.
- Consider adding a database to store player scores for a leaderboard feature.
By combining your knowledge of JavaScript with the PokéAPI, you can create engaging and educational games that are both fun and informative.
