Primera práctica de Compositor de Programas
Entra en Chat GPT (o en cualquier otro chatbot).
Utiliza un prompt como este: "Genera el juego de las tres en raya en html"
Copia el código generado y lo pegas en un fichero .txt y lo guardas.
En tu explorador de archivos, en opciones, configura para que se vean las extensiones.
Llama al fichero robot.html
Ábrelo con un navegador en tu ordenador, tablet, móvil...
Programa variantes del juego. Por ejemplo, las 6 en raya, etc.
Código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tres en Raya</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.cell {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
cursor: pointer;
background-color: #fff;
border: 2px solid #333;
}
.cell:hover {
background-color: #eee;
}
h1, button {
text-align: center;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h1>Tres en Raya</h1>
<div class="board" id="board">
<div class="cell" data-index="0"></div>
<div class="cell" data-index="1"></div>
<div class="cell" data-index="2"></div>
<div class="cell" data-index="3"></div>
<div class="cell" data-index="4"></div>
<div class="cell" data-index="5"></div>
<div class="cell" data-index="6"></div>
<div class="cell" data-index="7"></div>
<div class="cell" data-index="8"></div>
</div>
<button onclick="resetGame()">Reiniciar Juego</button>
<p id="message"></p>
</div>
<script>
const board = document.getElementById("board");
const message = document.getElementById("message");
let cells = Array.from(document.querySelectorAll(".cell"));
let currentPlayer = "X";
let gameState = ["", "", "", "", "", "", "", "", ""];
const winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
function handleClick(event) {
const index = event.target.getAttribute("data-index");
// Si la celda ya está ocupada o el juego ha terminado, no hacer nada
if (gameState[index] !== "" || checkWin() || checkDraw()) return;
gameState[index] = currentPlayer;
event.target.textContent = currentPlayer;
if (checkWin()) {
message.textContent = `¡Jugador ${currentPlayer} gana!`;
return;
}
if (checkDraw()) {
message.textContent = "¡Es un empate!";
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
function checkWin() {
return winningCombinations.some(combination => {
const [a, b, c] = combination;
return gameState[a] && gameState[a] === gameState[b] && gameState[a] === gameState[c];
});
}
function checkDraw() {
return gameState.every(cell => cell !== "");
}
function resetGame() {
gameState = ["", "", "", "", "", "", "", "", ""];
cells.forEach(cell => cell.textContent = "");
currentPlayer = "X";
message.textContent = "";
}
cells.forEach(cell => cell.addEventListener("click", handleClick));
</script>
</body>
</html>