68 lines
2.6 KiB
Markdown
68 lines
2.6 KiB
Markdown
# Mambo DVD
|
||
|
||
Salvapantallas tipo logo de DVD: Mambo rebota en bucle por la pantalla, cambia
|
||
de color y suena en cada rebote. Cuando cae justo en una esquina, esa esquina
|
||
se queda encendida con el color exacto del golpe.
|
||
|
||
## Cómo abrirlo
|
||
|
||
Doble clic en `index.html`. No necesita servidor ni instalar nada.
|
||
|
||
El navegador no deja reproducir audio sin una interacción previa, por eso la
|
||
portada pide un clic en **Iniciar** antes de arrancar.
|
||
|
||
## Controles
|
||
|
||
| Tecla | Acción |
|
||
|---|---|
|
||
| `Espacio` | Pausar y reanudar (también funciona haciendo clic) |
|
||
| `S` | Probar el sonido |
|
||
| `E` | Precisión de esquina: Normal · Generosa · Real |
|
||
| `C` | Modo de color: Tinte · Sólido · Original |
|
||
| `F` | Pantalla completa |
|
||
| `+` / `−` | Velocidad, de 0.25× a 4× |
|
||
| `R` | Reiniciar contadores y trayectoria |
|
||
| `H` | Ocultar el HUD |
|
||
|
||
## Modos de color
|
||
|
||
- **Tinte** — gira el matiz del peluche conservando la ilustración.
|
||
- **Sólido** — silueta plana de un color, que es lo que hacía el logo original.
|
||
- **Original** — sin recoloreo.
|
||
|
||
## Precisión de esquina
|
||
|
||
Una esquina exacta significa rebotar en los dos ejes en el mismo fotograma, y
|
||
eso casi nunca pasa: en pruebas a 1920×1080 con margen fijo de 15 px salieron
|
||
0 esquinas en 60 segundos. Por eso la tolerancia es un porcentaje del lado
|
||
menor de la ventana y no un valor en píxeles.
|
||
|
||
- **Real** (0.8 %) — purista, pueden pasar muchos minutos.
|
||
- **Normal** (4.5 %) — por defecto, una esquina cada pocos minutos.
|
||
- **Generosa** (11 %) — para verlo seguido.
|
||
|
||
## Archivos
|
||
|
||
| Archivo | Qué hace |
|
||
|---|---|
|
||
| `index.html` | Estructura: escenario, sprite, HUD y portada |
|
||
| `styles.css` | Paleta OSD de reproductor de DVD, animaciones de impacto |
|
||
| `app.js` | Física del rebote, detección de esquina, color y audio |
|
||
| `Mambo_png.png` | El sprite |
|
||
| `mambo_audio.ogg` | El sonido del rebote |
|
||
|
||
## Detalles de implementación
|
||
|
||
- El movimiento va por **delta de tiempo**, no por fotograma, así que se ve
|
||
igual a 60 Hz que a 144 Hz. El delta se acota a 50 ms para que volver de una
|
||
pestaña en segundo plano no provoque un salto.
|
||
- El modo Sólido se pinta en **canvas con `source-in`**, no con `mask-image`.
|
||
Las máscaras CSS pasan por CORS y en `file://` (origen `null`) el sprite
|
||
quedaba invisible. El canvas solo compone y nunca lee píxeles, así que el
|
||
*taint* no molesta.
|
||
- El desbloqueo de audio reproduce en silencio y **deja terminar** el clip. La
|
||
versión con `pause()` abortaba el golpe real que cayera dentro de esa
|
||
ventana y lo perdía con un `AbortError`.
|
||
- El color avanza con el **ángulo áureo** (137.508°) para que dos rebotes
|
||
seguidos nunca den colores parecidos.
|