//CREAR LA MATRIZ DE 20 X 20
var matriz = new Array(20);

for (var i = 0; i < matriz.length; i++) {
    matriz[i] = new Array(20);
}

//INICIALIZAR LA MATRIZ A 0
for (var i = 0; i < matriz.length; i++) {
    for (var j = 0; j < matriz[i].length; j++) {
        matriz[i][j] = 0;
    }
}

//INTRODUCIR BARCOS

//BARCO DE 5 CASILLAS
matriz[0][0] = 'x';
matriz[0][1] = 'x';
matriz[0][2] = 'x';
matriz[0][3] = 'x';
matriz[0][4] = 'x';

//BARCO DE 4 CASILLAS
matriz[2][0] = 'x';
matriz[2][1] = 'x';
matriz[2][2] = 'x';
matriz[2][3] = 'x';

//BARCO DE 3 CASILLAS
matriz[4][0] = 'x';
matriz[4][1] = 'x';
matriz[4][2] = 'x';

//BARCO DE 2 CASILLAS
matriz[6][0] = 'x';
matriz[6][1] = 'x';

//BARCO DE 2 CASILLAS
matriz[8][0] = 'x';
matriz[8][1] = 'x';


//CREAR E INICIALIZAR CONTADORES DEL JUEGO PARA SABER
//SI HA FINALIZADO
var contador_x = 0;

//DAR ID A TODOS LOS NODOS DE LA TABLA

var listatr = document.getElementsByTagName("tr");
for (var i = 0; i < listatr.length; i++) {
    listatr[i].setAttribute("id", "tr" + i + "");
}

var listatd = document.getElementsByTagName("td");
for (var i = 0; i < listatd.length; i++) {
    listatd[i].setAttribute("id", "td" + i + "");
}


//ASIGNAR A TODOS LOS TD QUE SE EJECUTE EL MANEJADOR
//DESPUES DEL EVENTO CLICK
var lista_td = document.getElementsByTagName("td");
for (var td of lista_td) {
    td.addEventListener("click", manejador);
}



//CREAR EL MANEJADOR

function manejador() {
    var pos_x = this.parentNode.getAttribute("id").substring(2, this.parentNode.getAttribute("id").length);
    var pos_y = this.getAttribute("id").substring(2, this.getAttribute("id").length);

    if (matriz[pos_x][pos_y] == 'x') {
        this.setAttribute("class", "colorRojo");
    } else {
        this.setAttribute("class", "colorAzul");
    }

}

//FINALIZAR EL JUEGO CUANDO TODOS LOS BANCOS ESTÉN HUNDIDOS

//RECORRER MATRIZ

for (var i = 0; i < matriz.length; i++) {
    for (var j = 0; j < matriz[i].length; j++) {
        console.log(matriz[i][j]);
    }
}