Bienvenido a nuestro emocionante juego de juego tres en raya html css y javascript. En esta experiencia interactiva, hemos desarrollado una versión clásica del popular juego de Tres en Raya, donde dos jugadores compiten para colocar sus símbolos, «X» o «O», en un tablero de 3×3. Nuestro código ha sido diseñado por expertos programadores en JavaScript para brindarte una experiencia de juego sencilla, amigable y visualmente atractiva. ¡Prepárate para desafiar a tus amigos o a la computadora en este divertido juego de estrategia! ¿Tienes lo necesario para conquistar el tablero y alcanzar la victoria? ¡Acepta el desafío y comienza a jugar ahora mismo! 🌟🎮
Código Juego tres en raya Html Css y Javascript
En la creación de nuestro juego de Tres en Raya (Tic Tac Toe), hemos utilizado una combinación de tecnologías web modernas para brindarte una experiencia interactiva y dinámica. Para el desarrollo de la interfaz de usuario, hemos empleado HTML y CSS para estructurar y estilizar el tablero del juego, logrando un diseño visualmente atractivo y responsive. Asimismo, hemos hecho uso del poderoso lenguaje de programación JavaScript para implementar la lógica de juego y la interactividad, permitiéndonos gestionar los movimientos de los jugadores, verificar el estado del tablero y determinar al ganador.
HTML
<!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>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="contenedor">
<div class="casilla" onclick="hacerMovimiento(0)"></div>
<div class="casilla" onclick="hacerMovimiento(1)"></div>
<div class="casilla" onclick="hacerMovimiento(2)"></div>
<div class="casilla" onclick="hacerMovimiento(3)"></div>
<div class="casilla" onclick="hacerMovimiento(4)"></div>
<div class="casilla" onclick="hacerMovimiento(5)"></div>
<div class="casilla" onclick="hacerMovimiento(6)"></div>
<div class="casilla" onclick="hacerMovimiento(7)"></div>
<div class="casilla" onclick="hacerMovimiento(8)"></div>
</div>
<script src="js.js"></script>
</body>
</html>
CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.contenedor {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
}
.casilla {
width: 100px;
height: 100px;
background-color: #08479f;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
cursor: pointer;
}
JavaScript
// Variable para almacenar el estado del tablero (vacío al inicio)
let tablero = ["", "", "", "", "", "", "", "", ""];
// Variable para llevar el registro de quién es el jugador actual (jugador 'X' o 'O')
let jugadorActual = "X";
// Función para hacer un movimiento en el tablero
function hacerMovimiento(indice) {
// Si la casilla ya está ocupada o el juego ya terminó, no hacer nada
if (tablero[indice] !== "" || hayGanador() || tableroCompleto()) {
return;
}
// Realizar el movimiento del jugador actual en la casilla seleccionada
tablero[indice] = jugadorActual;
// Actualizar la visualización del tablero en la página
document.querySelectorAll(".casilla")[indice].textContent = jugadorActual;
// Verificar si hay un ganador después del movimiento
if (hayGanador()) {
alert(`¡El jugador ${jugadorActual} ha ganado!`);
reiniciarJuego();
return;
}
// Verificar si el tablero está completo (empate)
if (tableroCompleto()) {
alert("¡Empate! El juego ha terminado sin ganador.");
reiniciarJuego();
return;
}
// Cambiar el turno al siguiente jugador
cambiarTurno();
}
// Función para cambiar el turno al siguiente jugador
function cambiarTurno() {
jugadorActual = jugadorActual === "X" ? "O" : "X";
}
// Función para verificar si hay un ganador
function hayGanador() {
const combinacionesGanadoras = [
[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
];
for (const combinacion of combinacionesGanadoras) {
const [a, b, c] = combinacion;
if (tablero[a] && tablero[a] === tablero[b] && tablero[a] === tablero[c]) {
return true;
}
}
return false;
}
// Función para verificar si el tablero está completo (empate)
function tableroCompleto() {
return tablero.every(casilla => casilla !== "");
}
// Función para reiniciar el juego
function reiniciarJuego() {
// Reiniciar el estado del tablero
tablero = ["", "", "", "", "", "", "", "", ""];
jugadorActual = "X";
// Limpiar la visualización del tablero en la página
document.querySelectorAll(".casilla").forEach(casilla => casilla.textContent = "");
}
Conclusión
En esta implementación del juego tres en raya html css y javascript, hemos creado una experiencia interactiva y divertida para los jugadores. Mediante HTML, CSS y JavaScript, logramos construir un tablero visualmente atractivo y una lógica de juego funcional.
El código se destaca por su simplicidad y claridad, empleando nombres de variables significativos y comentarios para guiar a través de las distintas funcionalidades. Utilizando conceptos fundamentales de JavaScript, como arreglos y bucles, gestionamos el estado del tablero, alternando los turnos de los jugadores y comprobando si hay un ganador o empate.
Además, hemos hecho uso de las capacidades del DOM para actualizar dinámicamente la visualización del tablero cada vez que se realiza un movimiento. Esto proporciona una experiencia de juego fluida y amigable para el usuario.
El código representa una implementación elegante y eficiente del clásico juego de Tres en Raya en un entorno web. Un experto programador en JavaScript apreciará la modularidad, legibilidad y el enfoque en la usabilidad que se ha logrado en este proyecto. ¡A disfrutar del juego y seguir construyendo experiencias interactivas asombrosas! 🚀🎮