Juego clásico de memoria (encontrar pares de cartas) con temática Pokémon. Todo el tablero se dibuja en un canvas de HTML5; las cartas son sprites de la PokéAPI y el reverso imita una Pokéball.

• Descripción
• Características
• Tecnologías
• Instalación y uso
• Cómo jugar
• Estructura del proyecto
• API utilizada
• Proceso de desarrollo

El juego carga 8 Pokémon aleatorios desde la PokéAPI, genera 16 cartas (8 pares) y las reparte en una cuadrícula 4×4. El jugador debe voltear cartas de dos en dos hasta emparejar todas. Las cartas se renderizan íntegramente en un <canvas>; no se usan elementos del DOM para las cartas, solo para el título, el contador de movimientos y el botón de reinicio.

• HTML5 — Estructura y elemento <canvas>
• Tailwind CSS (CDN) — Estilos del contenedor, título, contador y botones
• JavaScript (ES6+) — Lógica del juego, fetch, precarga de imágenes, dibujado e interacción
• PokéAPI — Listado y sprites frontales de Pokémon

Sin dependencias npm; solo archivos estáticos y CDN.

1. Clona el repositorio:

   git clone https://github.com/TU_USUARIO/Solearn.git
   cd Solearn

2. Abre index.html en tu navegador (doble clic o arrastrar al navegador).

Nota: Algunos navegadores pueden restringir peticiones desde file://. Si los Pokémon no cargan, usa la opción 2.

1. Clona el repositorio (igual que arriba).

2. Desde la raíz del proyecto, levanta un servidor local:

   Con Node.js (npx):

   npx serve

   Luego abre en el navegador la URL que muestre (por ejemplo http://localhost:3000).

   Con Python 3:

   python -m http.server 8080

   Abre http://localhost:8080.

   Con PHP:

   php -S localhost:8000

   Abre http://localhost:8000.

3. El juego cargará los Pokémon desde la API y podrás jugar sin problemas de CORS.

1. Al cargar la página se muestran 16 cartas boca abajo (reverso tipo Pokéball).
2. Haz clic en una carta para voltearla y ver el Pokémon.
3. Haz clic en otra carta. Si el Pokémon es el mismo, las dos quedan emparejadas (borde verde). Si no, se vuelven a tapar tras 1 segundo.
4. Repite hasta emparejar las 8 parejas.
5. El contador de movimientos aumenta con cada dos cartas que volteas.
6. Usa "Reiniciar Juego" para una nueva partida con otros 8 Pokémon aleatorios.

Solearn/
├── index.html    # Página principal: layout, Tailwind, canvas, contador, botón reiniciar
├── main.js       # Lógica completa: estado, PokéAPI, precarga, dibujado, clics, reinicio
└── README.md     # Este archivo

• index.html: Define el <canvas>, el título, el contador de intentos y el botón de reinicio. Todo lo que son “cartas” se dibuja dentro del canvas.
• main.js: Constantes, estado del juego, fetch a la PokéAPI, precarga de imágenes, creación y barajado de cartas, función draw() (reverso Pokéball, anverso sprite, pantalla de victoria), manejo de clics (AABB) y función global reiniciarJuego().

• PokéAPI v2
  • Listado: GET https://pokeapi.co/api/v2/pokemon?limit=100
  • Detalle por Pokémon: se usa la url de cada resultado para obtener id y sprites.front_default.
  • Si el sprite no está disponible, se usa:
    https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{id}.png

No se requiere API key. Uso respetuoso según las condiciones de uso de la API.

1. Diseño: Juego de memoria en canvas con temática Pokémon; UI exterior con Tailwind; datos desde PokéAPI.
2. Estructura: HTML con canvas 480×480; JS modular con estado global (cartas, intentos, cartas volteadas, bloqueo, imágenes precargadas).
3. Datos: Fetch del listado, elección de 8 índices aleatorios, fetch de cada Pokémon, precarga de imágenes con Promise.all y Image().
4. Baraja: Array de 16 cartas (8 pares), shuffle Fisher-Yates, cálculo de posiciones en cuadrícula 4×4 con gap.
5. Renderizado: Función draw() que pinta reverso (Pokéball con arcos), anverso (sprite), estado “matched” y mensaje de victoria.
6. Interacción: Un click en el canvas; coordenadas con getBoundingClientRect y escala; detección AABB; lógica de 2 cartas y timeout de 1 s si no coinciden.
7. Reinicio: Nueva selección de 8 Pokémon, nueva precarga, nueva baraja y actualización del contador y del canvas.

Proyecto de uso libre con fines educativos. Pokémon y sus sprites son marcas y materiales de The Pokémon Company / Nintendo; este proyecto no está afiliado ni respaldado por ellos. Los sprites se obtienen vía PokéAPI.