Doc: Movilidad Sostenible

1. Ficha Técnica

Nombre: Movilidad Sostenible
ODS: ODS 11 - Ciudades / ODS 17 - Alianzas
Objetivo: Mover una serie de vehículos manual o libremente al área "segura" (carril bici o similar) sin colisionar contra obstáculos en movimiento continuo.

2. Mecánica y Flujo de Juego

Usa coordenadas libres (absolutas en px o %) del ratón en lugar de Snap al Drag and Drop HTML5. Es un cruce de simulación de física Top-Down y esquivar proyectiles.

Aparece una "Zona Segura" visual en el contenedor.
Vehículos interactivos (DOM elements) parpadean en el borde opuesto indicando que es urgente moverlos.
Obstáculos independientes cruzan la pantalla horizontalmente interpolando X.
El jugador pulsa clic primario en un vehículo y arrastra libremente evadiendo a los obstáculos hasta el área verde.

3. Lógica de Programación

Es uno de los minijuegos mecánicamente más sofisticados ya que emula un sistema 2D completo.

Matemáticas y Eventos Drag Libre

document.addEventListener('mousedown', (e) => { ... });
document.addEventListener('mousemove', (e) => { 
    if(!this.isDragging) return;
    this.car.x = (e.clientX - boundRect.left); 
    this.car.y = (e.clientY - boundRect.top);
});
document.addEventListener('mouseup', (e) => { ... });
                

Las coordenadas se convierten utilizando Element.getBoundingClientRect() para normalizar la posición del ratón respecto al Canvas virtual CSS.

Motor de Colisiones

Implementa la técnica AABB (Axis-Aligned Bounding Box Intersection) comprobando que dos rectángulos abstractos solapan en el frame actual mediante el método update() que corre en bucle a al menos 60FPS.

4. Sistema de Victoria/Derrota

Victoria: En el evento mouseup, comprueba si el vehículo soltado está dentro de los márgenes matemáticos de la "Safe Zone" definida. Suma y procede al siguiente si restan.

Derrota: 1 simple colisión detectada por AABB o agotar el temporizador activa un Game Over.