Verificar color de una fila columna o diagonal de una tabla

Hola muy buenas, estoy realizando una especie de X en raya y debo recorrer la tabla para comprobar quién ha ganado. El tema es que cada jugador tiene un color y tengo que recorrer la tabla para verificar que una fila o columna o diagonal (teniendo en cuenta si es una tabla cuadrada o no) tengan el mismo color. El fragmento de código que me recorre las celdas de cada fila es el siguiente:

for(f=0; f<filas; f++){
    casilla1 = document.getElementById(f+"0");
    for(c=1; c<columnas; c++) {
        casilla2 = document.getElementById("" + f + "" + c);
        if (casilla1.style.backgroundColor == casilla2.style.backgroundColor) {
           alert("ganaste");
        }
    }                    
}

Las id de cada celda estan asignadas como 01, 02, 11, 12, etc... siendo la fila el primer dígito y la columna el segundo.

Comparándome de esta manera la celda de la primera columna de cada fila con cada celda de la misma fila. Por desgracia, esto no me funciona y me ayudaría muchísimo si pudiéseis decirme cómo hacerlo.

Muchas gracias de antemano, un saludo!

Respuestas

He probado el código JavaScript que indicas con el siguiente código HTML:

<div id="00">
    <div id="01"></div>
    <div id="02"></div>
    <div id="03"></div>
</div>
<div id="10">
    <div id="11"></div>
    <div id="12"></div>
    <div id="13"></div>
</div>
<div id="12">
    <div id="21"></div>
    <div id="22"></div>
    <div id="23"></div>
</div>

El código funciona correctamente (recorre las filas y columnas) por lo que no hay ningún error. Lo que falta por hacer es la lógica que busca líneas verticales, horizontales y diagonales. ¿Puedes enseñarnos el código que has probado para implementar esa lógica?

@javiereguiluz

15 abril 2015, 15:29

lo primero, gracias por contestar. el problema que tengo es que no se como hacer esa logica, no soy capaz de crearlo, no me verifica las filas ni columnas. un saludo!

@davidpollofeliz

16 abril 2015, 11:13

Lo primero que te aconsejo es que cambies el valor de los atributos id de las celdas. Usar solamente números es una mala idea porque al formar cadenas de texto con el operador +, se pueden producir errores porque el navegador trata de sumar los números en vez de concatenarlos.

Ejemplo de cómo puedes definir el tablero:

<div id="f_0">
    <div id="c_0_0" style="background: red;"></div>
    <div id="c_0_1" style="background: blue;"></div>
    <div id="c_0_2" style="background: red;"></div>
</div>
<div id="f_1">
    <div id="c_1_0" style="background: red;"></div>
    <div id="c_1_1" style="background: red;"></div>
    <div id="c_1_2" style="background: blue;"></div>
</div>
<div id="f_2">
    <div id="c_2_0" style="background: red;"></div>
    <div id="c_2_1" style="background: red;"></div>
    <div id="c_2_2" style="background: red;"></div>
</div>

Después, la lógica JavaScript puedes dividirla en tres partes para que sea más facil: en la primera compruebas filas, en la segunda columnas y en la tercera las diagonales (si el tablero es cuadrado).

Te pongo un ejemplo en plan sencillo de cómo se podría diseñar la lógica que comprueba las filas:

var filas = 3;
var columnas = 3;
 
// comprobar filas
for(f=0; f<filas; f++) {
    var celdasIguales = 0;
    var colorInicial = document.getElementById("c_" + f + "_0").style.backgroundColor;
 
    for(c=0; c<columnas; c++) {
        var colorActual = document.getElementById("c_" + f + "_" + c).style.backgroundColor;
 
        if (colorInicial == colorActual) {
            celdasIguales++;
        } else {
           break;
        }
    }
 
    if (columnas == celdasIguales) {
        alert("ganaste!");
        break;
    }
}

@javiereguiluz

16 abril 2015, 23:16