Juego Piedra Papel Tijeras en JavaScript

Juego Piedra Papel Tijeras en JavaScript

Juego Piedra Papel Tijeras en JavaScript

Octavo proyecto de la guia 50 Proyectos de Programacion para Practicar y Aprender. Proyectos para Principiantes

Enunciado del proyecto

Este juego permite al usuario elegir entre piedra, papel o tijeras para competir contra una elecciรณn aleatoria de la computadora. El programa muestra quiรฉn gana cada ronda.

Cรณdigo HTML, CSS y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Piedra, Papel o Tijeras</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 30px;
      background-color: #f2f2f2;
    }
    button {
      padding: 10px 20px;
      margin: 10px;
      font-size: 16px;
    }
    #resultado {
      font-size: 20px;
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h2>Piedra, Papel o Tijeras</h2>

  <p>Elige tu opciรณn:</p>
  <button onclick="jugar('piedra')">Piedra</button>
  <button onclick="jugar('papel')">Papel</button>
  <button onclick="jugar('tijeras')">Tijeras</button>

  <p id="resultado"></p>

  <script>
    function jugar(eleccionUsuario) {
      const opciones = ['piedra', 'papel', 'tijeras'];
      const eleccionComputadora = opciones[Math.
floor(Math.random() * 3)];

      let resultado = "";

      if (eleccionUsuario === eleccionComputadora) {
        resultado = "ยกEmpate! Ambos eligieron " + 
eleccionUsuario;
      } else if (
        (eleccionUsuario === 'piedra' && eleccionComputadora 
=== 'tijeras') ||
        (eleccionUsuario === 'papel' && eleccionComputadora
 === 'piedra') ||
        (eleccionUsuario === 'tijeras' && 
eleccionComputadora === 'papel')
      ) {
        resultado = "ยกGanaste! " + eleccionUsuario +
 " vence a " + eleccionComputadora;
      } else {
        resultado = "ยกPerdiste! " + eleccionComputadora +
 " vence a " + eleccionUsuario;
      }

      document.getElementById("resultado").innerText = 
resultado;
    }
  </script>

</body>
</html>

Juego Piedra Papel Tijeras en JavaScript. Explicaciรณn del Cรณdigo

  • HTML: Botones para que el usuario elija entre piedra, papel o tijeras, y un pรกrrafo donde se muestra el resultado.
  • CSS: Estilos simples para mejorar la presentaciรณn.
  • JavaScript:
    • Math.random() elige una opciรณn aleatoria para la computadora.
    • Se comparan las elecciones del usuario y la computadora para determinar el ganador.

Indice de la guia de proyectos

50 Proyectos de Programacion

Proyecto anterior

Reloj Digital en JavaScript