PokéSector 35 — El misterio de los Pokémon salvajes

PokéSector 35 es un juego de exploración y captura de Pokémon desarrollado con HTML, CSS y JavaScript puro. El jugador controla a un explorador que debe atravesar un mapa de casillas hasta llegar a la meta, enfrentándose por el camino a encuentros con Pokémon salvajes obtenidos en tiempo real de la PokeAPI.

El proyecto cumple los requisitos de programación orientada a objetos (POO), manipulación del DOM, consumo de APIs externas y persistencia de datos mediante localStorage.

---

Tabla de contenidos

• Demo
• Capturas de pantalla
• Tecnologías y APIs utilizadas
• Instalación y despliegue local
• Estructura del proyecto
• Memoria del proyecto
• Guía rápida de uso
• Controles
• Características principales
• Licencia

---

Demo

Despliega el proyecto en local siguiendo las instrucciones de instalación o súbelo a cualquier servicio de hosting estático (GitHub Pages, Netlify, Vercel…).

Ver Demo PokéSector 35

---

Capturas de pantalla

---

Tecnologías y APIs utilizadas

Tecnología	Versión	Uso
HTML5	—	Estructura del juego y la consola gameboy
CSS3	—	Estilos, animaciones y layout responsivo
JavaScript ES6+	—	Lógica de juego, módulos, clases (POO)
PokeAPI	v2	Datos de Pokémon (nombre, sprite) en tiempo real
localStorage	Web API	Persistencia de partida y colección global
fetch	Web API	Llamadas asíncronas a la PokeAPI

No se utiliza ningún framework ni librería externa. Todo el código es JavaScript vanilla con módulos ES6 nativos.

---

Instalación y despliegue local

Requisitos previos

• Un navegador moderno con soporte para módulos ES6 (type="module"): Chrome 61+, Firefox 60+, Safari 11+, Edge 79+.
• Un servidor local. Los módulos ES6 no funcionan al abrir el archivo index.html directamente desde el sistema de archivos (file://) por restricciones de CORS del navegador.

Opción A — Extensión Live Server (recomendada para desarrollo)

1. Instala la extensión Live Server en Visual Studio Code.
2. Abre la carpeta del proyecto en VS Code.
3. Haz clic derecho sobre index.html → Open with Live Server.
4. El navegador abrirá automáticamente http://127.0.0.1:5500.

Opción B — Python (sin instalar nada adicional)

# Python 3
cd ruta/al/proyecto
python -m http.server 8000

Abre http://localhost:8000 en el navegador.

Opción C — Node.js

npx serve .

Abre la URL que indique la terminal.

Opción D — GitHub Pages

1. Sube el repositorio a GitHub.
2. Ve a Settings → Pages.
3. En Source, selecciona la rama main y la carpeta / (root).
4. GitHub generará una URL pública en pocos minutos.

---

Estructura del proyecto

pokesector-35/
├── index.html
├── README.md
├── css/
│   ├── styles.css            ← Variables, reset y consola gameboy
│   ├── intro-screen.css      ← Pantalla de inicio y animación de intro
│   ├── game-screen.css       ← Mapa de juego y HUD
│   ├── battle-screen.css     ← Pantalla de combate
│   ├── goal-screen.css       ← Pantalla de meta (enhorabuena)
│   ├── stats-screen.css      ← Pantalla de estadísticas y Pokédex
│   └── game-over-screen.css  ← Pantalla de derrota
├── documentation/
│   ├── memoria-tecnica.css   ← Memoria técnica del proyecto
│   ├── presentacion.css      ← Presentación del proyecto
├── js/
│   ├── main.js               ← Punto de entrada y arranque del juego
│   ├── game-state.js         ← Estado global y persistencia (localStorage)
│   ├── controls.js           ← Eventos de teclado y botones
│   ├── movement.js           ← Movimiento del jugador y lógica del mapa
│   ├── api.js                ← Conexión con la PokeAPI (fetch)
│   ├── battle.js             ← Lógica de combate
│   ├── hud.js                ← Actualización del HUD (HP, Pokéballs)
│   ├── intro.js              ← Animación de introducción
│   ├── player-name.js        ← Gestión del nombre del explorador
│   ├── pokemon.js            ← Clases Pokemon y Pokedex (POO)
│   ├── sounds.js             ← Recursos de audio
│   ├── game-over.js          ← Pantalla de derrota
│   ├── stats.js              ← Controlador de estadísticas
│   ├── stats-summary.js      ← Vista resumen de estadísticas
│   ├── stats-pokedex.js      ← Vista Pokédex con filtrado
│   └── stats-ui.js           ← Utilidades de interfaz de estadísticas
└── assets/
    ├── img/                  ← Imágenes y sprites
    ├── sounds/               ← Efectos de sonido y música
    └── fonts/                ← Fuente pixel-art pokemonGB

---

Memoria del proyecto

Ver documentación

---

Guía rápida de uso

Primera vez

1. Abre el juego en el navegador.
2. Pulsa START o Enter para iniciar la intro animada.
3. Escribe tu nombre de explorador en el cuadro de diálogo (máximo 12 caracteres). La próxima vez no te lo volverá a pedir.
4. Pulsa START o Enter de nuevo para saltar la intro (si no escribes un nombre, se te asignará uno por defecto).
5. El juego te sitúa en la casilla inicial [0,0] del mapa.

Objetivo

Llega desde la casilla inicial hasta la casilla de meta [4,6] (marcada con una bandera) antes de quedarte sin vida.

Durante la partida

• Muévete por el mapa con el D-Pad o las flechas del teclado.
• Al pisar una casilla puedes encontrarte con un Pokémon salvaje (30% en suelo normal, 70% en hierba alta).
• En los encuentros: A/Space para lanzar una Pokéball, B/Esc para huir (pierdes 1 HP).
• Si fallas la captura, el Pokémon escapa y pierdes 2 HP.

Al llegar a la meta

• Se muestra un resumen con los Pokémon capturados y escapados en esta partida, más el total histórico.
• Pulsa Select/Shift para ver las estadísticas completas.
• Pulsa Start/Enter para comenzar una nueva partida.

Pantalla de estadísticas

• Arriba/Abajo — hacer scroll por la lista.
• A/Space — abrir la Pokédex global.
• B/Esc — borrar estadísticas (pide confirmación).

Pokédex global

• ◀/▶ (Izquierda/Derecha) — filtrar por letra inicial.
• B/Esc — volver al resumen.

---

Controles

Acción	Botón físico	Teclado
Mover al explorador	D-Pad ▲▼◀▶	Flechas del teclado
Lanzar Pokéball / Confirmar	A	Space
Huir / Cancelar / Volver	B	Escape
Iniciar intro / Nueva partida	START	Enter
Ver estadísticas	SELECT	Shift

---

Características principales

• Mapa de 5×7 casillas con tres tipos de terreno: suelo normal, hierba alta y rocas.
• Encuentros Pokémon con datos e imágenes obtenidos en tiempo real de la PokeAPI (generación I, 151 Pokémon).
• Sistema de combate con probabilidad de captura del 60%.
• Persistencia completa: la partida se guarda tras cada paso y se restaura al recargar el navegador.
• Pokédex global: colección acumulada de los Pokémon de todas las partidas, sin mostrar repetidos, ordenados por número de Pokédex.
• Filtrado por letra inicial en la Pokédex usando los botones de dirección.
• Sonido: efectos de sonido y música de intro.
• Diseño responsivo inspirado en la estética de la Game Boy Pocket original.

---

Licencia

Proyecto de uso educativo. Los datos de Pokémon se obtienen de PokeAPI, que es de uso libre y gratuito. Pokémon y todos los nombres relacionados son marcas registradas de Nintendo / Game Freak.