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.
¿Qué necesitas?
- Tener instalado Node.js (para compilar TypeScript).
- Un editor de texto o IDE (como Visual Studio Code).
Paso 1: Configura el Proyecto
- Crea una carpeta para tu proyecto y navega a ella:
mkdir piedra-papel-tijera cd piedra-papel-tijera - Inicializa un proyecto Node.js y configura TypeScript:
npm init -y npm install typescript --save-dev npx tsc --init - Asegúrate de que tu archivo
tsconfig.jsontiene configurado"strict": truey"outDir": "./dist". - 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>
Piedra</button> <button id="paper">
Papel</button>
Papel</button> <button id="scissors">
Tijera</button>
Tijera</button> </div>
<p id="result"></p>
<button id="restart">Reiniciar</button>
</div>
<script src="dist/index.js"></script>
</body>
</html>
<!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>
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><!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;
}
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;
}
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 = "";
});
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 = "";
});
";
}
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 = "";
});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
npx tsc
npx tsc
Abre el archivo index.html en tu navegador para jugar.
Mejoras que puedes implementar
- Contador de Puntos: Añade un marcador para el jugador y la computadora.
- Estilos Dinámicos: Cambia los colores del texto según el resultado.
- Niveles de Dificultad: Ajusta las probabilidades de que la computadora gane.
- Animaciones: Usa CSS para animar las elecciones del jugador y la computadora.
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.
0