Tic Tac Toe con javascript + HTML caso de uso basico

LBYTE
Juegos , Javascript , HTML
19 de marzo de 2022

Table of Contents

Análisis del Problema

Tic-Tac-Toe es un juego de dos jugadores que alternan turnos para colocar sus marcas (“X” o “O”) en una cuadrícula de 3x3. El objetivo es lograr tres en línea (horizontal, vertical o diagonal) antes que el oponente.

Reglas del Juego

Se juega en un tablero de 3x3.
Dos jugadores alternan turnos: Jugador 1 (“X”) y Jugador 2 (“O”).
Un jugador gana si coloca tres de sus marcas en línea (horizontal, vertical o diagonal).
El juego termina en empate si el tablero se llena sin un ganador.
No se permite colocar una marca en una casilla ya ocupada.

Algoritmo para Implementar el Juego

Inicialización

Crear una matriz de 3x3 vacía para representar el tablero.
Definir los símbolos de los jugadores (“X” y “O”).
Establecer una variable para rastrear el turno actual.

Bucle Principal del Juego

Mostrar el tablero al usuario.
Pedir al jugador actual que ingrese la fila y la columna donde quiere jugar.
- Verificar que la casilla esté vacía antes de permitir la jugada.
Colocar la marca del jugador en la posición elegida.
Comprobar si el jugador ha ganado con esta jugada.
- Si ganó, mostrar el tablero y terminar el juego.
Si no hay ganador y el tablero está lleno, declarar empate.
Alternar el turno al otro jugador.
Repetir hasta que haya un ganador o empate.

Comprobación de Ganador

Un jugador gana si:

Alguna fila contiene las mismas tres marcas.
Alguna columna contiene las mismas tres marcas.
Una de las diagonales contiene las mismas tres marcas.

Fin del Juego

Si hay un ganador, anunciarlo y finalizar el programa.
Si hay empate, mostrar un mensaje y finalizar.

Implementación en Código (Javascript)

Mostrar el tablero al usuario.

estructura del proyecto

📂 nombre_del_proyecto
- 📄 index.html
- 📄 scripts.js
- 📄 styles.css

crear un folder desde el navegador de archivos o usando la terminal

mkdir nombre_del_proyecto

navegar a tu proyecto y crear un archivo html

touch index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic-Tac-Toe</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Tic-Tac-Toe</h1>
    <div class="tablero" id="tablero"></div>
    <p id="estado"></p>
    <button>Reiniciar</button>
    <script src="scripts.js"></script>
</body>
</html>

Sobre Las Etiquetas

Hemos definido los siguientes elementos dentro de nuestro codigo HTML:

un titulo para nuestro juego dentro de la etiqueta h1
nuestro tablero de juego dentro de la etiqueta div identificado con el id=“tablero” y con la clase de estilos class=“tablero” que lo explicaremos mas abajo
el estado que mostrara el turno del jugador actual dentro de una etiqueta p
el boton que nos permitira reiniciar el juego

Sobre Los Archivos Externos

Tomar en cuenta que usamos las etiquetas link y script para importar recursos externos como son el archivo de estilos y el archivos de javascript, se espera que el archivo de estilos este localizado dentro de la etiqueta head dado que el navegador cargue y aplique los estilos antes de renderizar el contenido. 💡 quiero saber mas.

creamos el archivo de javascript

touch scripts.js

agregamos el codigo que nos permitira crear el tablero dinamicamente

const tablero = document.getElementById("tablero");
const estado = document.getElementById("estado");
let celdas = [];
let jugadorActual = "X";

function crearTablero() {
    tablero.innerHTML = "";
    celdas = [];
    for (let i = 0; i < 9; i++) {
        const celda = document.createElement("div");
        celda.classList.add("celda");
        celda.dataset.index = i;
        tablero.appendChild(celda);
        celdas.push(celda);
    }
    estado.textContent = `Turno de ${jugadorActual}`;
}

crearTablero();

Notas

finalmente incluimos los estilos que nos permitiran dar algo de orden a nuestro a codigo

.tablero {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 5px;
    margin: 20px auto;
    width: max-content;
}
.celda {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    border: 2px solid black;
    cursor: pointer;
}

Hasta ahora tenemos el siguiente resultado

Warning

Hasta ahora tenemos el tablero donde hemos definido una etiqueta H1 para definir el titulo, luego tenemos la etiqueta DIV que envuelve todas las celdas del table, notar que hemos establecido una clase “tablero” para la tabla y otra clase “celda” para las celdas