Embedded Files
Formas de agregar comentario:
<!-- Esto es un comentario en HTML -->
/* Esto es un comentario en CSS */
// Esto es un comentario en JavaScript
<!DOCTYPE html>
<!-- ==== INICIO DEL HTML ==== -->
<html lang="es"> <!-- Establece el idioma principal del contenido como español -->
<head>
<meta charset="UTF-8"> <!-- Define la codificación de caracteres -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ajusta el diseño en dispositivos móviles -->
<title>TaTeTi</title> <!-- Título de la página -->
<!-- ==== INICIO DEL CSS ==== -->
<style>
/* Estilos generales del juego */
body {
font-family: Arial, sans-serif; /* Tipo de letra */
text-align: center; /* Centra el contenido */
}
/* Contenedor del tablero */
.board {
display: grid; /* Usa grid para organizar las celdas */
grid-template-columns: repeat(3, 100px); /* Tres columnas de 100px */
grid-template-rows: repeat(3, 100px); /* Tres filas de 100px */
gap: 5px; /* Espacio entre celdas */
margin: 20px auto; /* Centra el tablero */
width: 320px; /* Ancho del tablero */
}
/* Estilo de cada celda */
.cell {
width: 100px; /* Ancho de la celda */
height: 100px; /* Altura de la celda */
display: flex; /* Alinea el contenido */
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra horizontalmente */
font-size: 2em; /* Tamaño del texto */
background-color: #f0f0f0; /* Color de fondo */
border: 2px solid #333; /* Borde de la celda */
cursor: pointer; /* Cursor tipo puntero */
}
/* Desactiva el puntero cuando la celda ya está ocupada */
.cell.taken {
cursor: not-allowed; /* Deshabilita clics en celdas ocupadas */
}
</style>
</head>
<body>
<h1>Juego de TaTeTi</h1> <!-- Título principal -->
<h6>Ing. Emanuel Bombina</h6> <!-- Nombre del desarrollador -->
<p>Versión 2 de TATETI</p> <!-- Información de la versión del juego -->
<!-- Formulario para ingresar nombres y seleccionar colores -->
<div>
<label>Jugador X: <input type="text" id="playerX" placeholder="Nombre del Jugador X"></label>
<label>Color: <input type="color" id="colorX" value="#ff0000"></label>
<br>
<label>Jugador O: <input type="text" id="playerO" placeholder="Nombre del Jugador O"></label>
<label>Color: <input type="color" id="colorO" value="#0000ff"></label>
<br>
<br>
<button onclick="startGame()">Iniciar Juego</button>
</div>
<div class="board" id="board"></div> <!-- Contenedor del tablero -->
<h2 id="status">Esperando nombres...</h2> <!-- Indica el turno actual -->
<button onclick="resetGame()">Reiniciar</button> <!-- Botón para reiniciar el juego -->
<!-- ==== INICIO DEL JAVASCRIPT ==== -->
<script>
let currentPlayer = "X"; // Jugador actual
let board = ["", "", "", "", "", "", "", "", ""]; // Estado del tablero
let gameActive = false; // Indica si el juego está activo
let players = { X: "Jugador X", O: "Jugador O" }; // Nombres de los jugadores
let colors = { X: "#ff0000", O: "#0000ff" }; // Colores de los jugadores
const boardElement = document.getElementById("board");
const statusText = document.getElementById("status");
function startGame() {
players.X = document.getElementById("playerX").value || "Jugador X";
players.O = document.getElementById("playerO").value || "Jugador O";
colors.X = document.getElementById("colorX").value;
colors.O = document.getElementById("colorO").value;
gameActive = true;
statusText.textContent = `Turno de: ${players.X}`;
createBoard();
}
function createBoard() {
boardElement.innerHTML = "";
board.forEach((cell, index) => {
const cellElement = document.createElement("div");
cellElement.classList.add("cell");
cellElement.dataset.index = index;
cellElement.addEventListener("click", handleCellClick);
boardElement.appendChild(cellElement);
});
}
function handleCellClick(event) {
const index = event.target.dataset.index;
if (board[index] !== "" || !gameActive) return;
board[index] = currentPlayer;
event.target.textContent = currentPlayer;
event.target.style.color = colors[currentPlayer];
if (checkWinner()) {
statusText.textContent = `Ganador: ${players[currentPlayer]}`;
gameActive = false;
return;
}
if (!board.includes("")) {
statusText.textContent = "Empate!";
gameActive = false;
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusText.textContent = `Turno de: ${players[currentPlayer]}`;
}
function checkWinner() {
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]
];
return winningCombinations.some(combination => {
const [a, b, c] = combination;
return board[a] && board[a] === board[b] && board[a] === board[c];
});
}
function resetGame() {
board = ["", "", "", "", "", "", "", "", ""];
gameActive = false;
statusText.textContent = "Esperando nombres...";
createBoard();
}
</script>
</body>
</html>
Page updated
Google Sites
Report abuse