Bart vs Bob Patiño - Valentín De Gennaro

Escala del Proyecto

10Pasos

4Clases

530Líneas finales

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

Jugador

Posición, sprite, vidas, estado de invencibilidad y respuesta a las teclas mediante keydown y keyup.

Npc

Enemigos con movimiento autónomo, su propio sprite y detección de colisión con el jugador y con las balas.

Bala

Proyectiles con dirección y velocidad, que se eliminan al impactar o al salir de la pantalla.

PowerUp

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: requestAnimationFrame se 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

Ver repositorio de apuntes

Ruta dentro del repositorio: Apuntes/008-Proyectos/001-Videjuegos/

🎮 Bart vs Bob Patiño