94 lines
3.5 KiB
HTML
94 lines
3.5 KiB
HTML
<!doctype html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>Mambo DVD</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
|
||
<main class="stage" id="stage">
|
||
|
||
<!-- Marcas de esquina: se encienden y se quedan con el color que las golpeó -->
|
||
<div class="corners" aria-hidden="true">
|
||
<span class="corner" data-corner="tl"></span>
|
||
<span class="corner" data-corner="tr"></span>
|
||
<span class="corner" data-corner="br"></span>
|
||
<span class="corner" data-corner="bl"></span>
|
||
</div>
|
||
|
||
<!-- El elemento que rebota -->
|
||
<div class="sprite" id="sprite" data-color="tint">
|
||
<img class="sprite__art" id="spriteArt" src="Mambo_png.png" alt="Peluche de Mambo rebotando por la pantalla" draggable="false">
|
||
<canvas class="sprite__solid" id="spriteSolid" width="500" height="500" aria-hidden="true"></canvas>
|
||
</div>
|
||
|
||
<!-- Impacto de esquina -->
|
||
<div class="impact" id="impact" aria-hidden="true">
|
||
<span class="impact__ring" id="impactRing"></span>
|
||
</div>
|
||
<div class="flash" id="flash" aria-hidden="true"></div>
|
||
|
||
<div class="grain" aria-hidden="true"></div>
|
||
<div class="vignette" aria-hidden="true"></div>
|
||
|
||
<div class="paused" id="pausedTag" aria-hidden="true">▮▮ En pausa</div>
|
||
</main>
|
||
|
||
<!-- HUD estilo menú de reproductor -->
|
||
<aside class="hud" id="hud" aria-live="polite">
|
||
<div class="hud__stat hud__stat--lead">
|
||
<span class="hud__label">Esquinas</span>
|
||
<span class="hud__value" id="statCorners">0</span>
|
||
</div>
|
||
<div class="hud__stat">
|
||
<span class="hud__label">Rebotes</span>
|
||
<span class="hud__value" id="statBounces">0</span>
|
||
</div>
|
||
<div class="hud__stat">
|
||
<span class="hud__label">Velocidad</span>
|
||
<span class="hud__value" id="statSpeed">1.0×</span>
|
||
</div>
|
||
<div class="hud__stat">
|
||
<span class="hud__label">Color</span>
|
||
<span class="hud__value hud__value--word" id="statMode">Tinte</span>
|
||
</div>
|
||
<div class="hud__stat">
|
||
<span class="hud__label">Esquina</span>
|
||
<span class="hud__value hud__value--word" id="statAim">Normal</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Solo aparece si el navegador rechaza reproducir el sonido -->
|
||
<p class="audio-alert" id="audioAlert" role="status">
|
||
El navegador bloqueó el audio. Haz clic en la pantalla y vuelve a probar con <kbd>S</kbd>.
|
||
</p>
|
||
|
||
<nav class="keys" id="keys" aria-label="Atajos de teclado">
|
||
<span><kbd>Espacio</kbd> Pausar</span>
|
||
<span><kbd>S</kbd> Probar sonido</span>
|
||
<span><kbd>E</kbd> Precisión de esquina</span>
|
||
<span><kbd>C</kbd> Color</span>
|
||
<span><kbd>F</kbd> Pantalla completa</span>
|
||
<span><kbd>+</kbd><kbd>−</kbd> Velocidad</span>
|
||
<span><kbd>R</kbd> Reiniciar</span>
|
||
<span><kbd>H</kbd> Ocultar HUD</span>
|
||
</nav>
|
||
|
||
<!-- Portada de arranque. También desbloquea el audio del navegador. -->
|
||
<div class="boot" id="boot">
|
||
<div class="boot__panel">
|
||
<p class="boot__eyebrow">Salvapantallas</p>
|
||
<h1 class="boot__title">Mambo<span class="boot__title-dim">DVD</span></h1>
|
||
<p class="boot__note">Mambo cambia de color y suena en cada rebote. Cuando cae justo en una esquina, esa esquina queda encendida con el color del golpe. El navegador necesita este clic para poder reproducir sonido.</p>
|
||
<button class="boot__play" id="bootPlay" type="button">
|
||
<span class="boot__glyph">▶</span> Iniciar
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|