main.js

/**
 * Mucho del codigo que se repite se debe a que no encontre una forma
    de parar el javascrip a la hora de tomar ciertas decisiones
 */

//guardamos los nombres como variables globales
var nombreJ1;
var nombreJ2;
//radio button (forma de los jugadores X  O)
var tipoForma;
var computadora = 0; //determina si juega o no la computadora
var listo = 0; //sirve para pausar los tiempos cuando juega la computadora

//cuando le de click al boton Iniciar juego se validara lo siguiente
var jugar = document.getElementById("jugar");
jugar.addEventListener("click", empezarJuego);
//validamos que ambos no esten vacios y si jugara la computadora
function validarNombres() {
    nombreJ1 = document.getElementById("jg-1").value;
    nombreJ2 = document.getElementById("jg-2").value;
    if (nombreJ1.length != 0 && nombreJ2.length != 0) {
        var maquina = document.getElementById("computadora").checked;
        //si esta selecionada la opcion computadora 
        if (maquina == true)
            computadora = 1;
        return true;
    }
    return false;
}

//comprobamos que haya seleccionado una forma
function validarRadio() {
    var radio;
    var x = document.querySelector("input#tipoJugador").checked;
    if (x) {
        radio = ["x", "o"];
    } else {
        radio = ["o", "x"];
    }
    return radio;
}

//si todo esta correcto empezamos el juego
function empezarJuego() {

    if (validarNombres()) {
        var cargaDatos = document.querySelector("div.jugadores");
        cargaDatos.hidden = "true";
        tipoForma = validarRadio();
        //comenzamos a escuchar el juego 
        var tabla = document.querySelector("div.juego");
        tabla.classList.add("jugar");

    } else {
        //lanzamos un mensaje de error
        var error = document.querySelector("div#mensaje");
        error.classList.add("hidden");
        //esperamos unos segundos para sacarlo
        setTimeout(function() {
            error.classList.remove("hidden");
        }, 3500);
    }
}

//controlamos los sucesos en la tabla
var celdas = document.getElementsByTagName("td");
//cargamos los eventos

for (let i = 0; i < celdas.length; i++) {
    celdas[i].addEventListener("click", verificarMovimiento);
}

var turno = 0; //determina el turno
var termino = 0; //si termina antes de las 9 jugadas
var matriz = [
    ["a", "b", "c"],
    ["d", "e", "f"],
    ["g", "h", "i"]
]; //matriz que guarda los movimientos
var movimiento = 0;

//funcion para verificar si el movimiento es valido
function verificarMovimiento() {
    //si ya se ejecuto los milisegundos entonces lo realiza
    if (listo == 0) {
        if (termino == 0) {
            var clase = this.classList.length; //si aun no posee ninguna clase entonces es una casilla habilitada
            if (clase == 0) {
                if (turno == 0) {
                    this.classList.add(tipoForma[0]);
                    movimiento++;
                    cargarMatriz(this.id);
                    turno = 1;

                } else if (computadora == 0) { //si no esta jugando la computadora 
                    this.classList.add(tipoForma[1]);
                    movimiento++;
                    cargarMatriz(this.id);
                    turno = 0;
                }
            }
            termino = comprobarGanador();
            if (computadora == 1 && termino == 0 && turno == 1) {
                listo = 1;
                movimientoComputadora();
            }
            if (movimiento == 9 && termino == 0) {
                termino = 2; //si termino por movimientos entonces es empate
                finalizarJuego();
            }
            if (termino == 1)
                finalizarJuego();

        } else {
            finalizarJuego();
        }
    }
}
//funcion para cargar la matriz
function cargarMatriz(cadena) {
    var columna = parseInt(cadena.charAt(1));
    var fila;

    switch (cadena.charAt(0)) {
        case 'A':
            fila = 0;
            break;
        case 'B':
            fila = 1;
            break;
        case 'C':
            fila = 2;
            break;
        default:
            break;
    }

    matriz[fila][columna] = tipoForma[turno];
}

function comprobarGanador() {
    //comprobamos si todas las posibilidades
    //columnas
    if (matriz[0][0] == matriz[1][0] && matriz[1][0] == matriz[2][0])
        return 1;
    if (matriz[0][1] == matriz[1][1] && matriz[1][1] == matriz[2][1])
        return 1;
    if (matriz[0][2] == matriz[1][2] && matriz[1][2] == matriz[2][2])
        return 1;

    //las filas
    if (matriz[0][0] == matriz[0][1] && matriz[0][1] == matriz[0][2])
        return 1;

    if (matriz[1][0] == matriz[1][1] && matriz[1][1] == matriz[1][2])
        return 1;
    if (matriz[2][0] == matriz[2][1] && matriz[2][1] == matriz[2][2])
        return 1;
    //diagonales
    if (matriz[0][0] == matriz[1][1] && matriz[1][1] == matriz[2][2])
        return 1;
    if (matriz[2][0] == matriz[1][1] && matriz[1][1] == matriz[0][2])
        return 1;
    return 0;
}

//mostramos el mensaje de finalizacion
function finalizarJuego() {
    var final = document.querySelector("div.finalizado");
    final.classList.add("final-mostrar");
    if (termino == 2) {
        //hubo empate
        var ganador = document.querySelector("p.ganador");
        ganador.innerHTML = "Hubo un empate entre " + nombreJ1 + " y " + nombreJ2;
    } else {
        //gano un jugador
        var ganador = document.querySelector("p.ganador");
        if (turno == 0) {
            ganador.innerHTML = "El ganador es " + nombreJ2;
        } else {
            ganador.innerHTML = "El ganador es " + nombreJ1;
        }
    }
}

//movimiento de la computadora
function movimientoComputadora() {
    setTimeout(function() {
        var casilla = [
            ['A0', 'A1', 'A2'],
            ['B0', 'B1', 'B2'],
            ['C0', 'C1', 'C2']
        ];
        var ban = 0; //bandera que determina si se termino o no el proceso de busqueda
        //buscamos un elemento  vacio en la tabla
        var j = 0;
        var i = 0;
        while (true) {
            //tiramos numeros aleatorios para simular una opcion
            j = Math.floor(Math.random() * (3));
            i = Math.floor(Math.random() * (3));
            var elemento = document.getElementById(casilla[j][i]);
            //si aun no posee ninguna clase significa que aun no esta seleccionado
            if (elemento.classList.length == 0) {

                cargarMatriz(elemento.id);
                elemento.classList.add(tipoForma[1]);
                turno = 0;
                movimiento++;
                termino = comprobarGanador();
                if (termino == 1)
                    finalizarJuego();

                ban = 1;
                break;
            }
        }

        listo = 0;
    }, 200);

}