135 lines
6.4 KiB
HTML
Executable File
135 lines
6.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Piedra · Papel · Tijera · Lagarto · Spock</title>
|
|
<script src="js/piedra.js" defer></script>
|
|
<link rel="stylesheet" href="css/piedra-papel-tijera.css">
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header class="cabecera" id="titulo">
|
|
<h1>Piedra · Papel · Tijera · Lagarto · Spock</h1>
|
|
</header>
|
|
|
|
<button id="toggle-tema" class="boton">Cambiar tema</button>
|
|
|
|
<section class="nombre">
|
|
<label for="nombre" id="labelNombre">Nombre del jugador:</label>
|
|
<input class="campo" type="text" id="nombre" autocomplete="off">
|
|
<span class="error" id="errorNombre" aria-live="polite"></span>
|
|
<button class="boton" id="botonNombre">OK</button>
|
|
</section>
|
|
|
|
<main class="cuerpo">
|
|
|
|
<section class="columna" id="persona">
|
|
<header class="cabecera-jugador">
|
|
<p id="etiquetaJugador">Puntuación Jugador:</p>
|
|
<p id="puntos-persona">0</p>
|
|
</header>
|
|
|
|
<div class="opciones">
|
|
<button class="game-btn" id="piedra" data-choice="piedra" title="Piedra">🪨</button>
|
|
<button class="game-btn" id="papel" data-choice="papel" title="Papel">📄</button>
|
|
<button class="game-btn" id="tijera" data-choice="tijera" title="Tijera">✂️</button>
|
|
<button class="game-btn" id="lagarto" data-choice="lagarto" title="Lagarto">🦎</button>
|
|
<button class="game-btn" id="spock" data-choice="spock" title="Spock">🖖</button>
|
|
</div>
|
|
|
|
<p class="grande" id="eleccionjugador">¿Qué eliges?</p>
|
|
</section>
|
|
|
|
<section class="columna" id="imagencentro">
|
|
<p class="grande" id="resultado">Resultado</p>
|
|
|
|
<!-- Mapa interactivo: pasa el ratón sobre los botones para ver qué vence cada opción -->
|
|
<svg id="mapa-juego" class="mapa-svg" viewBox="0 0 350 290" xmlns="http://www.w3.org/2000/svg" aria-label="Mapa de reglas del juego">
|
|
|
|
<!-- Conexiones (quién vence a quién) -->
|
|
<!-- piedra → tijera -->
|
|
<line class="conexion" data-from="piedra" data-to="tijera" x1="253" y1="127" x2="133" y2="213"/>
|
|
<!-- piedra → lagarto -->
|
|
<line class="conexion" data-from="piedra" data-to="lagarto" x1="266" y1="137" x2="246" y2="203"/>
|
|
<!-- papel → piedra -->
|
|
<line class="conexion" data-from="papel" data-to="piedra" x1="102" y1="112" x2="248" y2="112"/>
|
|
<!-- papel → spock -->
|
|
<line class="conexion" data-from="papel" data-to="spock" x1="97" y1="97" x2="154" y2="57"/>
|
|
<!-- tijera → papel -->
|
|
<line class="conexion" data-from="tijera" data-to="papel" x1="104" y1="203" x2="84" y2="137"/>
|
|
<!-- tijera → lagarto -->
|
|
<line class="conexion" data-from="tijera" data-to="lagarto" x1="138" y1="228" x2="212" y2="228"/>
|
|
<!-- lagarto → papel -->
|
|
<line class="conexion" data-from="lagarto" data-to="papel" x1="217" y1="213" x2="97" y2="127"/>
|
|
<!-- lagarto → spock -->
|
|
<line class="conexion" data-from="lagarto" data-to="spock" x1="230" y1="203" x2="183" y2="67"/>
|
|
<!-- spock → piedra -->
|
|
<line class="conexion" data-from="spock" data-to="piedra" x1="196" y1="57" x2="253" y2="97"/>
|
|
<!-- spock → tijera -->
|
|
<line class="conexion" data-from="spock" data-to="tijera" x1="167" y1="67" x2="120" y2="203"/>
|
|
|
|
<!-- Nodos (posiciones en pentágono) -->
|
|
<g class="nodo" id="nodo-spock">
|
|
<circle cx="175" cy="42" r="26"/>
|
|
<text x="175" y="42" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🖖</text>
|
|
<text x="175" y="8" text-anchor="middle" class="nodo-label">Spock</text>
|
|
</g>
|
|
|
|
<g class="nodo" id="nodo-piedra">
|
|
<circle cx="274" cy="112" r="26"/>
|
|
<text x="274" y="112" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🪨</text>
|
|
<text x="308" y="116" text-anchor="start" class="nodo-label">Piedra</text>
|
|
</g>
|
|
|
|
<g class="nodo" id="nodo-lagarto">
|
|
<circle cx="238" cy="228" r="26"/>
|
|
<text x="238" y="228" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🦎</text>
|
|
<text x="238" y="272" text-anchor="middle" class="nodo-label">Lagarto</text>
|
|
</g>
|
|
|
|
<g class="nodo" id="nodo-tijera">
|
|
<circle cx="112" cy="228" r="26"/>
|
|
<text x="112" y="228" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">✂️</text>
|
|
<text x="112" y="272" text-anchor="middle" class="nodo-label">Tijera</text>
|
|
</g>
|
|
|
|
<g class="nodo" id="nodo-papel">
|
|
<circle cx="76" cy="112" r="26"/>
|
|
<text x="76" y="112" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">📄</text>
|
|
<text x="42" y="116" text-anchor="end" class="nodo-label">Papel</text>
|
|
</g>
|
|
</svg>
|
|
|
|
<p id="mapa-hint" class="mapa-hint-texto"></p>
|
|
</section>
|
|
|
|
<section class="columna" id="ordenador">
|
|
<header class="cabecera-jugador">
|
|
<p>Puntuación Ordenador:</p>
|
|
<p id="puntos-ordenador">0</p>
|
|
</header>
|
|
|
|
<div class="opciones">
|
|
<div class="game-btn-pc" id="pc-piedra">🪨</div>
|
|
<div class="game-btn-pc" id="pc-papel">📄</div>
|
|
<div class="game-btn-pc" id="pc-tijera">✂️</div>
|
|
<div class="game-btn-pc" id="pc-lagarto">🦎</div>
|
|
<div class="game-btn-pc" id="pc-spock">🖖</div>
|
|
</div>
|
|
|
|
<p class="grande" id="eleccionordenador">Elección del ordenador</p>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="py-5 text-center">
|
|
<div class="container">
|
|
<p class="mb-0">© 2026 - Tatiana Villa</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |