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.
🌟 ¡Visita Nuestra Tienda para Programadores! 🌟Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!
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! 🚀🎮