Scribd
Cargar
15 vistas2 páginas

Juego Snake Retro Interactivo

El documento es un código HTML para un juego llamado 'Snake Retro', que incluye una interfaz de usuario con configuraciones como nombre del jugador y volumen de música. También presenta controles táctiles para jugar y un sistema de puntuación. El diseño es responsivo y se incluye música de fondo para mejorar la experiencia del juego.

Cargado por

JuanCarlosParionaTorres
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
15 vistas2 páginas

Juego Snake Retro Interactivo

El documento es un código HTML para un juego llamado 'Snake Retro', que incluye una interfaz de usuario con configuraciones como nombre del jugador y volumen de música. También presenta controles táctiles para jugar y un sistema de puntuación. El diseño es responsivo y se incluye música de fondo para mejorar la experiencia del juego.

Cargado por

JuanCarlosParionaTorres
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd

<!

doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Snake Retro</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<div class="app">
<aside class="sidebar">
<h1>Snake Retro</h1>

<section class="card">
<h2>Configuración</h2>

<label>Nombre
<input id="name" type="text" maxlength="18" placeholder="Jugador" />
</label>

<label>Volumen música
<input id="volume" type="range" min="0" max="1" step="0.01"
value="0.35" />
</label>

<div class="buttons">
<button id="startBtn">▶ Start</button>
<button id="resetBtn" class="secondary">⟲ Reiniciar</button>
<button id="pauseBtn" class="secondary">⏸ Pausa (P)</button>
</div>
</section>

<section class="card">
<div class="tabs">
<button id="tabDur" class="tab active">Duración</button>
<button id="tabPts" class="tab">Puntos</button>
</div>
<ol id="leaderboard" class="leaderboard"></ol>
</section>

<!-- NUEVO FOOTER -->


<footer>
<small id="attribution">
DR Uso de audio con fines educativos │ Desarrollado por
<strong>JuanPariona©</strong> │ 2025
</small>
</footer>
</aside>

<main class="stage-wrap">
<canvas id="stage" width="960" height="960"></canvas>
<div id="overlay" class="overlay"></div>

<!-- D-pad táctil (se muestra en móviles; también usable en desktop) -->
<div id="pad" aria-label="Controles táctiles" role="group">
<button class="pad-btn" data-dir="up" aria-label="Arriba">▲</button>
<div class="pad-row">
<button class="pad-btn" data-dir="left"
aria-label="Izquierda">◀</button>
<button class="pad-btn" id="pad-pause"
aria-label="Pausa/Reanudar">⏯</button>
<button class="pad-btn" data-dir="right" aria-label="Derecha">▶</button>
</div>
<button class="pad-btn" data-dir="down" aria-label="Abajo">▼</button>
</div>
<!-- /D-pad -->
</main>
</div>

<!-- Música: coloca tu archivo en assets/[Link] o assets/music.mp3 -->


<audio id="bgm" preload="auto" loop>
<source src="assets/[Link]" type="audio/ogg" />
<source src="assets/music.mp3" type="audio/mpeg" />
</audio>

<!-- Importante: el D-pad debe estar en el DOM ANTES de cargar el JS -->


<script defer src="[Link]"></script>
</body>
</html>

También podría gustarte