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.
- 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
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…).
| 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.
- 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.htmldirectamente desde el sistema de archivos (file://) por restricciones de CORS del navegador.
- Instala la extensión Live Server en Visual Studio Code.
- Abre la carpeta del proyecto en VS Code.
- Haz clic derecho sobre
index.html→ Open with Live Server. - El navegador abrirá automáticamente
http://127.0.0.1:5500.
# Python 3
cd ruta/al/proyecto
python -m http.server 8000Abre http://localhost:8000 en el navegador.
npx serve .Abre la URL que indique la terminal.
- Sube el repositorio a GitHub.
- Ve a Settings → Pages.
- En Source, selecciona la rama
mainy la carpeta/ (root). - GitHub generará una URL pública en pocos minutos.
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
- Abre el juego en el navegador.
- Pulsa START o Enter para iniciar la intro animada.
- 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.
- Pulsa START o Enter de nuevo para saltar la intro (si no escribes un nombre, se te asignará uno por defecto).
- El juego te sitúa en la casilla inicial
[0,0]del mapa.
Llega desde la casilla inicial hasta la casilla de meta [4,6] (marcada con una bandera) antes de quedarte sin vida.
- 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.
- 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.
- Arriba/Abajo — hacer scroll por la lista.
- A/Space — abrir la Pokédex global.
- B/Esc — borrar estadísticas (pide confirmación).
- ◀/▶ (Izquierda/Derecha) — filtrar por letra inicial.
- B/Esc — volver al resumen.
| 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 |
- 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.
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.