Skip to content

Latest commit

 

History

History
247 lines (180 loc) · 10.1 KB

README.md

File metadata and controls

247 lines (180 loc) · 10.1 KB

Contributors Forks Stargazers Issues LinkedIn


Logo

Gotta fetch 'em all

Travel, explore, and catch Pokémons in React!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Contributing
  5. Contact
  6. Acknowledgments

About The Project

Battle Scene

Welcome to the Pokémon Battle Game! This is a fun, interactive game where you can travel through various locations, catch wild Pokémons, and battle them using your trusty team of Pokémons. Here’s how the game works:

Main Features:

  • Explore Locations: On the main page, you’ll find a list of locations. You can easily switch between pages to explore different areas and discover new Pokémon.

  • Random Enemy Encounters: When you click on a location, a random enemy Pokémon from that area will appear, ready for battle.

  • Battle Mechanics: You start with 3 base Pokémon, and you choose which one you want to send into battle against the enemy. The battle is automated based on each Pokémon’s attributes like health, damage, and defense.

  • Winning or Losing: If you win the battle, you catch the enemy Pokémon and it will join your collection for future battles. If you lose, your Pokémon is gone, lost forever. So choose wisely!

  • Pokéball Feature: On the main page, you can click on the Pokéball to view all the Pokémon that exist in the game, not just the ones you’ve caught. Use the search bar to find specific Pokémon by name or explore different types by clicking on the icons (like Fire, Water, etc.). When you click on an icon, it will display all the Pokémon of that type!

The game is easy to pick up, but strategic choices will determine your success. Each battle and encounter is different, keeping the game fresh and exciting. Pokémon Collection: Who doesn’t love catching Pokémon? Keep battling to build the ultimate team!

(back to top)

Built With

This game is built with React and features dynamic page switching, battle mechanics, and a simple but fun Pokémon collection system. Ready to embark on your adventure and become a Pokémon master?

  • React
  • Vite

(back to top)

Getting Started

This is an example of how to set up the Pokémon Battle Game locally.

Prerequisites

Before you begin, ensure that you have Node.js and npm installed. If not, you can download and install them from nodejs.org.

Installation

Follow these simple steps to get the project up and running on your machine.

  1. Clone the repo 
    git clone https://github.com/CodecoolGlobal/gotta-fetch-em-all-react-Akoss08.git
  2. Navigate to the project folder 
    cd pokemon-project
  3. Install NPM packages 
    npm install
  4. Start the development server 
    npm run dev
  5. Open your browser and go to http://localhost:5173/ to play the game!

(back to top)

Usage

Once you have the game running, you can explore different locations, encounter wild Pokémon, and engage in automated battles! Here's how you play:

  1. Explore Locations: On the main page, select different locations to encounter random Pokémon from that area.

Locations gif

  1. Battle Pokémon: Choose one of your three base Pokémon to battle against the enemy Pokémon or run away. The battle is automated, and the outcome depends on their stats like health, damage, and defense.

battle gif

  1. Catch Pokémon: If you win a battle, the enemy Pokémon is caught and added to your collection! If you lose, the selected Pokémon is gone.

loose gif

  1. Pokéball: Click on the Pokéball icon to view all the existing Pokémon.

pokedex gif

Example: Random Pokémon Encounter

Here’s a simplified snippet of how a random Pokémon is selected when you visit a new location:

useEffect(() => {
  async function fetchEnemyPokemon() {
    try {
      const locationResponse = await fetch(locationUrl);
      const location = await locationResponse.json();

      if (location.areas.length) {
        const randomAreaIndex = Math.floor(Math.random() * location.areas.length);
        const areaResponse = await fetch(location.areas[randomAreaIndex].url);
        const area = await areaResponse.json();
        const randomPokemonindex = Math.floor(Math.random() * area['pokemon_encounters'].length);

        const pokemonResponse = await fetch(area['pokemon_encounters'][randomPokemonindex].pokemon.url);
        const pokemon = await pokemonResponse.json();

        setEnemyPokemon(pokemon);
      } else {
        setIsEmptyLocation(true);
      }
    } catch (error) {
      console.error(`Error fetching from ${locationUrl}`);
    }
  }

  fetchEnemyPokemon();
}, [locationUrl]);

(back to top)

Contributing

This project is currently read-only and not open to external contributions. However, feel free to fork the repository for personal use or exploration.

Don't forget to give the project a star if you like it! 🌟

Top contributors:

(back to top)

Contact

Akos Horvath - LinkedIn - akos97@gmail.com

(back to top)

Acknowledgments

We’d like to take a moment to thank the resources and tools that helped us bring this Pokémon game to life:

  • Pokémon API – For providing the essential Pokémon data used in this game
  • Vite – For offering fast and efficient development with minimal setup
  • React – For being the core framework powering the user interface.
  • Shields.io – For generating beautiful badges used in the README
  • GitHub Pages – For hosting and sharing the game with the world

(back to top)