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> <!-- Define el documento como HTML5 -->
<!-- ==== INICIO DEL HTML ==== -->
<!-- (HyperText Markup Language) es un lenguaje de marcado utilizado para estructurar el contenido de páginas web. HTML no es un lenguaje de programación, sino un lenguaje de marcado porque su función es estructurar el contenido de una página web mediante etiquetas (<h1>, <p>, <div>, etc.).. -->
<html lang="es"> <!-- Establece el idioma principal del contenido como español -->
<head> <!-- Se escribe entre los caracteres < > porque es una etiqueta HTML que define una sección del documento. -->
<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 Versión 1</title> <!-- Título de la página -->
<!-- ==== INICIO DEL CSS ==== -->
<!-- CSS (Cascading Style Sheets) es un lenguaje de estilos que se usa para definir la apariencia de un sitio web. CSS no es un lenguaje de programación, sino un lenguaje de estilos. -->
<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 -->
<div class="board" id="board"></div> <!-- Contenedor del tablero -->
<h2 id="status">Turno de: X</h2> <!-- Indica el turno actual -->
<button onclick="resetGame()">Reiniciar</button> <!-- Botón para reiniciar el juego -->
<!-- ==== INICIO DEL JAVASCRIPT ==== -->
<!-- JavaScript es un lenguaje de programación que permite agregar interactividad y dinamismo a las páginas web. -->
<!-- JavaScript es un lenguaje de programación porque permite agregar lógica y comportamiento dinámico a las páginas web. -->
<script>
// Variables principales
let currentPlayer = "X"; // Define el jugador actual
let board = ["", "", "", "", "", "", "", "", ""]; // Estado del tablero
let gameActive = true; // Indica si el juego sigue activo
// Obtiene elementos del DOM
const boardElement = document.getElementById("board"); // Contenedor del tablero
const statusText = document.getElementById("status"); // Texto del estado del juego
// Función para crear el tablero
function createBoard() {
boardElement.innerHTML = ""; // Limpia el tablero
board.forEach((cell, index) => {
const cellElement = document.createElement("div"); // Crea una celda
cellElement.classList.add("cell"); // Agrega la clase CSS
cellElement.dataset.index = index; // Guarda el índice de la celda
cellElement.addEventListener("click", handleCellClick); // Agrega evento de clic
cellElement.textContent = cell; // Asigna contenido a la celda
boardElement.appendChild(cellElement); // Agrega la celda al tablero
});
}
// Manejo del clic en una celda
function handleCellClick(event) {
const index = event.target.dataset.index; // Obtiene el índice de la celda
if (board[index] !== "" || !gameActive) return; // Si la celda está ocupada o el juego terminó, no hacer nada
board[index] = currentPlayer; // Asigna el símbolo del jugador a la celda
event.target.textContent = currentPlayer; // Muestra el símbolo en la celda
event.target.classList.add("taken"); // Marca la celda como ocupada
if (checkWinner()) {
statusText.textContent = `Ganador: ${currentPlayer}`; // Muestra el ganador
gameActive = false; // Finaliza el juego
return;
}
if (!board.includes("")) {
statusText.textContent = "Empate!"; // Si no quedan espacios, hay empate
gameActive = false;
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X"; // Cambia el turno
statusText.textContent = `Turno de: ${currentPlayer}`; // Actualiza el estado del turno
}
// Función para verificar si hay un ganador
function checkWinner() {
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Filas
[0, 3, 6], [1, 4, 7], [2, 5, 8], // Columnas
[0, 4, 8], [2, 4, 6] // Diagonales
];
return winningCombinations.some(combination => {
const [a, b, c] = combination;
return board[a] && board[a] === board[b] && board[a] === board[c]; // Verifica si hay 3 en línea
});
}
// Función para reiniciar el juego
function resetGame() {
board = ["", "", "", "", "", "", "", "", ""]; // Reinicia el tablero
currentPlayer = "X"; // Restablece el turno al jugador X
gameActive = true; // Reactiva el juego
statusText.textContent = "Turno de: X"; // Restablece el estado del juego
createBoard(); // Redibuja el tablero
}
createBoard(); // Inicializa el tablero al cargar la página
</script>
</body>
</html>
Page updated
Google Sites
Report abuse