Projekt: Pokémon Memory Game

Mar 2, 2026

Březen 2026

Projekt byl zaměřený na React state management a práci s externím API. Výsledkem je paměťová hra, kde hráč nesmí kliknout dvakrát na stejnou kartu.

Co projekt dělá

Hra funguje nad kartami Pokémonů:

• Načtení 12 položek z PokeAPI při startu.
• Promíchání karet po každém tahu.
• Sledování aktuálního a nejlepšího skóre.
• Reset hry při opakovaném kliknutí na stejnou kartu.

Práce s API a useEffect

Karty se načítají asynchronně přes useEffect:

useEffect(() => {
	const getPokemons = async () => {
		const response = await fetch(
			"https://pokeapi.co/api/v2/pokemon?limit=12",
		);
		const data = await response.json();
		// transformace dat a nastavení stavu...
	};
	getPokemons();
}, []);

Nejtěžší část byla synchronizace načtení dat a renderu, aby UI nezobrazovalo prázdné karty.

Logika míchání a stavu

Hlavní logiku hry drží stav cards. Po každém kliknutí se pole s Pokémony zamíchá, což vynutí re-render komponenty a změnu pozic:

const handleCardClick = (id) => {
	if (clickedCards.includes(id)) {
		resetGame();
	} else {
		setClickedCards([...clickedCards, id]);
		setScore(score + 1);
		shuffleArray(cards);
	}
};

Komponentová struktura

Aplikaci jsem rozdělil na několik znovupoužitelných částí:

• Header: Zobrazuje název a aktuální/nejlepší skóre.
• CardGrid: Kontejner, který mapuje pole karet.
• Card: Jednotlivá karta s obrázkem a jménem Pokémona.

Co bylo náročné

• Asynchronní data: správné načtení dat před vykreslením.
• Imutabilita stavu: vždy vytvářet nové pole místo přímé mutace.
• UI layout: konzistentní mřížka na desktopu i mobilu.

Co jsem si odnesl

• Praktickou práci s useState a useEffect v reálné miniaplikaci.
• Lepší kontrolu nad podmíněným renderem (loading, error, ready).
• Jistotu v návrhu jednoduché herní logiky v Reactu.

Co dál

Projekt je funkční, ale v budoucnu bych chtěl přidat:

• Možnost vybrat si generaci Pokémonů.
• Animace pomocí Framer Motion při míchání karet.
• Zvukové efekty při kliknutí a prohře.
• LocalStorage pro trvalé uložení rekordního skóre.

GitHub: Pokemon_memory_game