Doc: Sea Hook

1. Ficha Técnica

Nombre: Sea Hook
ODS: ODS 14 - Vida Submarina
Objetivo: Mover el barco/gancho pescador con el cursor del ratón para atrapar exclusivamente residuos plásticos y botellas y no peces.

2. Mecánica y Flujo de Juego

Categorizado como "Catch Game" o "Catcher" inverso. En la típica variante WarioWare, los objetos caen desde el cielo al jugador. En este caso el barco está arriba, pero el comportamiento lineal de spawn inferior ascendente es fundamentalmente idéntico.

El DOM registra el movimiento global del puntero con mousemove en el contenedor.
El gancho/barco reescribe su left: % a la misma proporción.
El océano engendra aleatoriamente Objetos Positivos (peces) o Negativos (Basura) desde abajo.
Estos iteran un vector velocidad (y -= speed) hasta llegar al top, donde interceptan si chocan con la coordenada del barco.

3. Lógica de Programación

Las coordenadas en X siguen una sincronización lineal. La principal preocupación matemática radica en traducir coordenadas del Mouse (Pixeles) a Porcentajes CSS.

Ratón a Porcentaje (%)

this.container.addEventListener('mousemove', (e) => {
    const rect = this.container.getBoundingClientRect();
    let x = ((e.clientX - rect.left) / rect.width) * 100;
    this.hookX = Math.max(5, Math.min(x, 95));
});
                

Colisiones 1D

Puesto que la nave/gancho yace perennemente atorada en el eje Y (Arriba, Y superior asume ~10%), no necesitamos chequear iteraciones completas Rect/Rect con cada cuadro en dos dimensiones. Basta verificar en el Method update() de la basura si su variable local Y se acerca al gancho en el mismo momento en que su Math.abs(item.x - this.hookX) < Margen_de_Captura.

4. Sistema de Victoria/Derrota

Victoria: Colectar exitosamente mediante la colisión calculada un número prefijado de basuras representadas en el HUD.

Derrota:

Colectar un pescado (Game Over directo castigado por pesca indiscriminada).
Dejar que la basura se escape (opcional según balanceo).
Quedarse sin tiempo en el reloj mundial `this.timeLeft`.