🎮 Bart vs Bob Patiño
Videojuego 2D en Canvas con arquitectura orientada a objetos: jugador, NPCs, balas y power-ups
Escala del Proyecto
Descripción General
Ejercicio de la asignatura de Lenguajes de Marcas: un videojuego 2D completo construido en 10 pasos con HTML5 Canvas y JavaScript puro, sin motor de juego.
La arquitectura es orientada a objetos con cuatro clases:
Jugador, Npc, Bala y PowerUp.
Cada una gestiona su propio estado y su dibujado, lo que evita el problema clásico
de estos ejercicios: un único bucle gigante con cincuenta variables globales.
Incluye bucle de render con requestAnimationFrame, control de FPS,
sprites propios, NPCs con movimiento autónomo, detección de colisiones, sistema de
vidas, frames de invencibilidad tras recibir daño, power-ups y
progresión por niveles.
Tecnologías Utilizadas
HTML5 Canvas
JavaScript ES6
Clases / POO
requestAnimationFrame
Sprites
Las Cuatro Clases
Posición, sprite, vidas, estado de invencibilidad y respuesta a las teclas
mediante keydown y keyup.
Enemigos con movimiento autónomo, su propio sprite y detección de colisión con el jugador y con las balas.
Proyectiles con dirección y velocidad, que se eliminan al impactar o al salir de la pantalla.
Mejoras recogibles que modifican el estado del jugador.
Progresión del Ejercicio
Diez pasos, cada uno un HTML independiente, más los sprites del juego.
- 001Plantilla base con el lienzo preparado.
- 002Inicio y bucle de juego: la estructura sobre la que se monta todo lo demás.
- 003-004Creación de la clase del jugador y su dibujado en pantalla.
- 005Interacción: el usuario controla al jugador con el teclado.
- 006Control de FPS, para que el juego no vaya a distinta velocidad en cada equipo.
- 007Sprites: se sustituyen las figuras por imágenes reales.
- 008-009NPCs y su movimiento autónomo.
- 000-IAVersión final con las cuatro clases, colisiones, vidas, invencibilidad, power-ups y niveles. 530 líneas.
Qué Aprendí
- Que un bucle de juego no es un
setInterval:requestAnimationFramese sincroniza con el refresco de la pantalla y el navegador lo pausa cuando la pestaña no está visible. - Que sin control de FPS el juego va al doble de velocidad en un monitor de 120 Hz, porque el movimiento depende de los fotogramas y no del tiempo.
- Que separar en clases no es purismo académico: cuando aparecen las balas y los power-ups, un único bucle con variables globales se vuelve imposible de depurar.
- Que los frames de invencibilidad existen por una razón de diseño: sin ellos, tocar un enemigo consume todas las vidas de golpe, porque la colisión se detecta en cada fotograma.
- Que la detección de colisiones por rectángulos es suficiente para un juego 2D y mucho más simple que cualquier alternativa.
Mi Rol
Autor del ejercicio. Práctica individual de la asignatura de Lenguajes de Marcas.
Estado del Proyecto
Ejercicio académico completado, con los diez pasos y los sprites en el repositorio de apuntes.
Código y Enlaces
Ruta dentro del repositorio: Apuntes/008-Proyectos/001-Videjuegos/