Crea tu Propio Juego de «Piedra, Papel o Tijera» con TypeScript y una Interfaz Web

por
Tiempo de lectura: 2 minutos

En este tutorial, construiremos un juego interactivo de Piedra, Papel o Tijera usando TypeScript y HTML. Es una excelente oportunidad para aprender sobre la manipulación del DOM, las funciones en TypeScript y cómo manejar eventos.

Mujer con paraguas con luces - Pexels

¿Qué necesitas?

  • Tener instalado Node.js (para compilar TypeScript).
  • Un editor de texto o IDE (como Visual Studio Code).

Paso 1: Configura el Proyecto

  1. Crea una carpeta para tu proyecto y navega a ella: mkdir piedra-papel-tijera cd piedra-papel-tijera
  2. Inicializa un proyecto Node.js y configura TypeScript: npm init -y npm install typescript --save-dev npx tsc --init
  3. Asegúrate de que tu archivo tsconfig.json tiene configurado "strict": true y "outDir": "./dist".
  4. Crea la siguiente estructura de carpetas y archivos: piedra-papel-tijera/ ├── src/ │ ├── index.ts │ └── styles.css ├── index.html ├── tsconfig.json └── package.json

Paso 2: Escribir el HTML

En index.html, define una interfaz básica:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Piedra, Papel o Tijera</title>
</head>
<body>
  <div class="container">
    <h1>Piedra, Papel o Tijera</h1>
    <div class="choices">
      <button id="rock">🪨 Piedra</button>
      <button id="paper">📄 Papel</button>
      <button id="scissors">✂️ Tijera</button>
    </div>
    <p id="result"></p>
    <button id="restart">Reiniciar</button>
  </div>
  <script src="dist/index.js"></script>
</body>
</html>

Paso 3: Escribir el CSS

En styles.css, añade un diseño simple:

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

.container {
  max-width: 400px;
  margin: auto;
}

.choices button {
  margin: 10px;
  font-size: 20px;
  padding: 10px 20px;
}

#result {
  margin-top: 20px;
  font-size: 24px;
  color: #333;
}

Paso 4: Escribir el Código TypeScript

En src/index.ts, implementa la lógica del juego:

type Choice = "rock" | "paper" | "scissors";

const choices: Choice[] = ["rock", "paper", "scissors"];

const resultElement = document.getElementById("result")!;
const restartButton = document.getElementById("restart")!;

const getComputerChoice = (): Choice => {
  const randomIndex = Math.floor(Math.random() * choices.length);
  return choices[randomIndex];
};

const getResult = (player: Choice, computer: Choice): string => {
  if (player === computer) return "¡Empate!";
  if (
    (player === "rock" && computer === "scissors") ||
    (player === "paper" && computer === "rock") ||
    (player === "scissors" && computer === "paper")
  ) {
    return "¡Ganaste! 🎉";
  }
  return "Perdiste 😢";
};

const playGame = (playerChoice: Choice) => {
  const computerChoice = getComputerChoice();
  const result = getResult(playerChoice, computerChoice);
  resultElement.textContent = `Elegiste ${playerChoice}, la computadora eligió ${computerChoice}. ${result}`;
};

document.getElementById("rock")!.addEventListener("click", () => playGame("rock"));
document.getElementById("paper")!.addEventListener("click", () => playGame("paper"));
document.getElementById("scissors")!.addEventListener("click", () => playGame("scissors"));

restartButton.addEventListener("click", () => {
  resultElement.textContent = "";
});

Paso 5: Compilar y Ejecutar

Compila el código TypeScript a JavaScript:

npx tsc

Abre el archivo index.html en tu navegador para jugar.

Mejoras que puedes implementar

  1. Contador de Puntos: Añade un marcador para el jugador y la computadora.
  2. Estilos Dinámicos: Cambia los colores del texto según el resultado.
  3. Niveles de Dificultad: Ajusta las probabilidades de que la computadora gane.
  4. Animaciones: Usa CSS para animar las elecciones del jugador y la computadora.

Post Views: 5

Deja un comentario