Con proyecto de piedra papel y tijera

css/piedra-papel-tijera.css

@@ -0,0 +1,250 @@
+/* Fuentes */
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Orbitron:wght@400;600&family=VT323&display=swap');
+
+/* Variables base */
+:root {
+  --fuente-base: 'Nunito', sans-serif;
+  --fuente-titulos: 'Orbitron', sans-serif;
+  --fuente-retro: 'VT323', monospace;
+
+  --color-primario: #2F3A56;
+  --color-primario-oscuro: #24314A;
+  --color-secundario: #EAF2FA;
+  --color-acento: #E8A23A;
+  --color-fondo: #FAF7F2;
+  --color-texto: #2b2b2b;
+  --sombra: rgba(47, 58, 86, 0.15);
+
+  --borde: 2px solid var(--color-primario);
+  --transicion: 0.25s ease;
+}
+
+/* Modo oscuro */
+body.dark {
+  --color-primario: #0d1117;
+  --color-primario-oscuro: #161b22;
+  --color-secundario: #c9d1d9;
+  --color-fondo: #0d1117;
+  --color-texto: #e6edf3;
+  --color-acento: #f0c674;
+}
+
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--color-fondo);
+  font-family: var(--fuente-base);
+  color: var(--color-texto);
+  padding-bottom: 2rem;
+  transition: background-color 0.4s ease, color 0.4s ease;
+}
+
+/* Cabecera */
+.cabecera {
+  text-align: center;
+  padding: 1.5rem;
+  color: white;
+  background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
+  border-radius: 10px;
+  box-shadow: 0 4px 10px var(--sombra);
+  transition: background-color 0.4s ease;
+}
+
+.cabecera h1 {
+  font-family: var(--fuente-titulos);
+  font-size: 1.8rem;
+  letter-spacing: 6px;
+  text-transform: uppercase;
+  text-shadow: 2px 2px 4px rgba(255,255,255,0.4);
+}
+
+/* Botón de tema */
+#toggle-tema {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  background-color: var(--color-primario);
+  color: var(--color-secundario);
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: var(--fuente-retro);
+  transition: background-color var(--transicion);
+}
+
+#toggle-tema:hover {
+  background-color: var(--color-primario-oscuro);
+}
+
+/* Formulario nombre */
+.nombre {
+  padding: 1rem;
+  text-align: center;
+}
+
+.campo {
+  padding: 0.7rem;
+  margin: 0.5rem;
+  border-radius: 10px;
+  border: var(--borde);
+  width: 200px;
+}
+
+.boton {
+  background-color: var(--color-primario);
+  color: var(--color-secundario);
+  padding: 0.7rem 1.2rem;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color var(--transicion);
+}
+
+.boton:hover {
+  background-color: var(--color-primario-oscuro);
+}
+
+/* Contenedor principal */
+.cuerpo {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  /*background: var(--color-secundario);*/
+  border: 5px solid var(--color-primario);
+  margin: 1rem;
+  padding: 1rem;
+  border-radius: 15px;
+  box-shadow: 0 10px 20px var(--sombra);
+  transition: background-color 0.4s ease;
+}
+
+/* Columnas */
+.columna {
+  flex: 1 1 300px;
+  max-width: 400px;
+  text-align: center;
+  padding: 1rem;
+  transition: background-color 0.4s ease;
+}
+
+/* Cabecera jugador */
+.cabecera-jugador {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+/* Imágenes */
+.btn-img {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  border: var(--borde);
+  padding: 5px;
+  margin: 0.3rem;
+  cursor: pointer;
+  transition: transform var(--transicion), box-shadow var(--transicion);
+}
+
+.btn-img:hover {
+  transform: scale(1.15);
+  box-shadow: 0 0 10px var(--color-acento);
+}
+
+.btn-img.seleccionada {
+  box-shadow: 0 0 20px var(--color-acento);
+  transform: scale(1.2);
+}
+
+.btn-img:focus {
+  outline: 3px solid var(--color-acento);
+  outline-offset: 4px;
+}
+
+.central-img {
+  width: 80%;
+  max-width: 250px;
+  margin-top: 1rem;
+}
+
+/* Texto */
+.grande {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-top: 1rem;
+}
+
+.error {
+  color: var(--color-acento);
+  font-weight: bold;
+}
+
+/* Animaciones */
+.victoria {
+  animation: winGlow 0.8s ease-out;
+}
+
+@keyframes winGlow {
+  0% { box-shadow: 0 0 0px var(--color-acento); }
+  50% { box-shadow: 0 0 30px var(--color-acento); transform: scale(1.12); }
+  100% { box-shadow: 0 0 0px var(--color-acento); transform: scale(1); }
+}
+
+.derrota {
+  animation: loseShake 0.4s ease-in-out;
+}
+
+@keyframes loseShake {
+  0% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  50% { transform: translateX(5px); }
+  75% { transform: translateX(-5px); }
+  100% { transform: translateX(0); }
+}
+
+.empate {
+  animation: tiePulse 0.6s ease-in-out;
+}
+
+@keyframes tiePulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.08); }
+  100% { transform: scale(1); }
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  body {
+    padding: 0.5rem;
+  }
+
+  .cabecera h1 {
+    font-size: 1.4rem;
+  }
+
+  .btn-img {
+    width: 55px;
+    height: 55px;
+  }
+
+  .columna {
+    max-width: 100%;
+  }
+
+  .central-img {
+    width: 90%;
+  }
+
+  .campo {
+    width: 100%;
+    max-width: 250px;
+  }
+}

index.html

@@ -6,7 +6,7 @@
     <title>Aplicaciones de Vanguardia</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
@@ -38,6 +38,19 @@
                     </div>
                 </div>
 
+                <div class="col-md-6 col-lg-4">
+                    <div class="card project-card h-100">
+                        <div class="card-img-placeholder d-flex align-items-center justify-center">
+                            <img src="img/piedra-papel-tijera.jpg" alt="Piedra, Papel o Tijera" class="img-fluid">
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
+                            <p class="card-text text-muted">El famoso juego Piedra, Papel o Tijera realizado en HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
+                            <a href="piedra-papel-tijera.html" class="btn-link">Saber más →</a>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="col-md-6 col-lg-4">
                     <div class="card project-card h-100">
                         <div class="card-img-placeholder d-flex align-items-center justify-center">

js/piedra.js

@@ -0,0 +1,108 @@
+const DOM = {};
+
+function inicializarDOM() {
+  DOM.nombre = document.getElementById('nombre');
+  DOM.etiquetaJugador = document.getElementById("etiquetaJugador");
+  DOM.botonNombre = document.getElementById("botonNombre");
+  DOM.errorNombre = document.getElementById("errorNombre");
+  DOM.persona = document.getElementById("persona");
+  DOM.ordenador = document.getElementById("ordenador");
+  DOM.imagenCentral = document.getElementById("imagencentro");
+  DOM.puntosOrdenador = document.getElementById("puntos-ordenador");
+  DOM.puntosPersona = document.getElementById("puntos-persona");
+  DOM.eleccionjugador = document.getElementById("eleccionjugador");
+  DOM.eleccionordenador = document.getElementById("eleccionordenador");
+  DOM.resultado = document.getElementById("resultado");
+  DOM.opciones = document.querySelectorAll(".btn-img");
+  DOM.toggleTema = document.getElementById("toggle-tema");
+}
+
+function ocultarJuego() {
+  DOM.persona.style.visibility = "hidden";
+  DOM.ordenador.style.visibility = "hidden";
+}
+
+function mostrarJuego() {
+  DOM.persona.style.visibility = "visible";
+  DOM.ordenador.style.visibility = "visible";
+}
+
+function verificarNombre() {
+  const nombreValido = DOM.nombre.value.trim();
+  if (nombreValido === "") {
+    DOM.errorNombre.textContent = "El nombre no puede estar vacío";
+    ocultarJuego();
+  } else {
+    DOM.errorNombre.textContent = "";
+    comenzarPartida(nombreValido);
+    mostrarJuego();
+  }
+}
+
+function comenzarPartida(nombreJugador) {
+  DOM.etiquetaJugador.textContent = `Puntuación de ${nombreJugador}:`;
+  DOM.puntosOrdenador.textContent = "0";
+  DOM.puntosPersona.textContent = "0";
+}
+
+function animarResultado(tipo) {
+  DOM.resultado.classList.remove("victoria", "derrota", "empate");
+  void DOM.resultado.offsetWidth;
+  DOM.resultado.classList.add(tipo);
+}
+
+function reproducirSonido() {
+  const sonidoClick = new Audio("sounds/click.wav");
+  sonidoClick.currentTime = 0;
+  sonidoClick.play();
+}
+
+function quienGana(opcionJugador) {
+  const opciones = ["piedra", "papel", "tijera", "lagarto", "spock"];
+  const opcionOrdenador = opciones[Math.floor(Math.random() * opciones.length)];
+
+  DOM.eleccionjugador.textContent = opcionJugador;
+  DOM.eleccionordenador.textContent = opcionOrdenador;
+
+  const ganaJugador =
+    (opcionJugador === "piedra" && ["tijera", "lagarto"].includes(opcionOrdenador)) ||
+    (opcionJugador === "papel" && ["piedra", "spock"].includes(opcionOrdenador)) ||
+    (opcionJugador === "tijera" && ["papel", "lagarto"].includes(opcionOrdenador)) ||
+    (opcionJugador === "lagarto" && ["papel", "spock"].includes(opcionOrdenador)) ||
+    (opcionJugador === "spock" && ["piedra", "tijera"].includes(opcionOrdenador));
+
+  if (opcionJugador === opcionOrdenador) {
+    DOM.resultado.textContent = "Empate";
+    animarResultado("empate");
+  } else if (ganaJugador) {
+    DOM.resultado.textContent = "Ganaste";
+    DOM.puntosPersona.textContent = (parseInt(DOM.puntosPersona.textContent) + 1).toString();
+    animarResultado("victoria");
+  } else {
+    DOM.resultado.textContent = "Perdiste";
+    DOM.puntosOrdenador.textContent = (parseInt(DOM.puntosOrdenador.textContent) + 1).toString();
+    animarResultado("derrota");
+  }
+
+  reproducirSonido();
+}
+
+function configurarEventos() {
+  DOM.botonNombre.addEventListener("click", verificarNombre);
+  DOM.nombre.addEventListener("change", verificarNombre);
+  DOM.toggleTema.addEventListener("click", () => document.body.classList.toggle("dark"));
+
+  DOM.opciones.forEach(op => {
+    op.addEventListener("click", () => {
+      DOM.opciones.forEach(o => o.classList.remove("seleccionada"));
+      op.classList.add("seleccionada");
+      quienGana(op.id);
+    });
+  });
+}
+
+window.addEventListener("load", () => {
+  inicializarDOM();
+  ocultarJuego();
+  configurarEventos();
+});

piedra-papel-tijera.html

@@ -0,0 +1,74 @@
+<!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">
+</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">
+
+        <!-- Jugador -->
+        <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">
+                <img src="img/piedra-papel-tijera/piedra.png"  id="piedra"  class="btn-img" alt="Piedra">
+                <img src="img/piedra-papel-tijera/papel.png"   id="papel"   class="btn-img" alt="Papel">
+                <img src="img/piedra-papel-tijera/tijera.png"  id="tijera"  class="btn-img" alt="Tijera">
+                <img src="img/piedra-papel-tijera/lagarto.png" id="lagarto" class="btn-img" alt="Lagarto">
+                <img src="img/piedra-papel-tijera/spock.png"   id="spock"   class="btn-img" alt="Spock">
+            </div>
+
+            <p class="grande" id="eleccionjugador">¿Qué eliges?</p>
+        </section>
+
+        <!-- Centro -->
+        <section class="columna" id="imagencentro">
+            <p class="grande" id="resultado">Resultado</p>
+            <img src="img/piedra-papel-tijera/esquemaminimalista.png" class="central-img" alt="Esquema del juego">
+        </section>
+
+        <!-- Ordenador -->
+        <section class="columna" id="ordenador">
+            <header class="cabecera-jugador">
+                <p>Puntuación Ordenador:</p>
+                <p id="puntos-ordenador">0</p>
+            </header>
+
+            <div class="opciones">
+                <img src="img/piedra-papel-tijera/piedra.png"  class="btn-img" alt="Piedra">
+                <img src="img/piedra-papel-tijera/papel.png"   class="btn-img" alt="Papel">
+                <img src="img/piedra-papel-tijera/tijera.png"  class="btn-img" alt="Tijera">
+                <img src="img/piedra-papel-tijera/lagarto.png" class="btn-img" alt="Lagarto">
+                <img src="img/piedra-papel-tijera/spock.png"   class="btn-img" alt="Spock">
+            </div>
+
+            <p class="grande" id="eleccionordenador">Elección del ordenador</p>
+        </section>
+
+    </main>
+
+</body>
+</html>