Volver a Proyectos

Bart vs Bob Patiño

Juego 2D desarrollado con HTML5 Canvas y JavaScript puro

Descripción General

Bart vs Bob Patiño es un videojuego 2D de acción desarrollado completamente con HTML5 Canvas y JavaScript puro, sin librerías externas. El jugador controla a Bart Simpson y debe sobrevivir oleadas de Bob Patiños que lo persiguen con IA, disparando para eliminarlos antes de perder todas las vidas.

El proyecto fue desarrollado de forma incremental durante el curso de Lenguajes de Marcas, comenzando desde una plantilla básica hasta llegar a una arquitectura orientada a objetos completa con sistema de niveles, power-ups y lógica de juego avanzada.

Tecnologías Utilizadas


HTML5 Canvas

JavaScript ES6

OOP / Clases

Game Loop

IA básica

Características del Juego

  • Arquitectura OOP: Clases independientes para Jugador, NPC, Bala y PowerUp
  • IA para NPCs: Los enemigos persiguen al jugador con pathfinding basado en vectores normalizados
  • Sistema de disparos: Bala lanzada en la dirección de movimiento del jugador con cooldown configurable
  • Power-ups: Tres tipos — vida extra, velocidad aumentada y cadencia de disparo mejorada
  • Sistema de niveles: Cada nivel añade más NPCs con velocidad incremental (+18% por nivel)
  • Frames de invencibilidad: El jugador parpadea y es inmune 1 segundo tras recibir daño
  • HUD: Barra superior con puntuación, vidas y nivel en tiempo real
  • Fondo dibujado con Canvas: Cielo, césped, carretera y nubes generados por código
  • Controles: WASD o flechas para mover, Espacio para disparar

Arquitectura del Código

El proyecto se estructura en cuatro clases principales:

  • Jugador: Gestiona movimiento, límites de pantalla, invencibilidad y renderizado con efecto de parpadeo
  • Npc: Calcula cada frame la dirección hacia el jugador y avanza a velocidad proporcional al nivel
  • Bala: Se instancia con la dirección normalizada del jugador y viaja a velocidad fija hasta salir del canvas
  • PowerUp: Spawn aleatorio en mapa, con tres tipos y representación visual distinta por tipo

Contexto

Desarrollado como proyecto final de la unidad 8 de la asignatura Lenguajes de Marcas y Sistemas de Gestión de Información del ciclo formativo DAM (Desarrollo de Aplicaciones Multiplataforma) en el CEACFP de Valencia.

El desarrollo fue incremental y documentado paso a paso, desde la configuración del canvas hasta la implementación de la IA y los power-ups.

Estado

Estado: ✓ Completado

Proyecto académico finalizado. El juego es completamente funcional y jugable desde el navegador sin necesidad de instalación.