2

estoy creando un cartón de lotería,pero me he puesto en duda.

He adjuntado unos modelos,v2 y v3,Estoy usando botones, la idea es que cada botón tenga un identificador y un valor asignado, en el v2 he pensado en que cuando se haga botón sobre el ratón se quede en rojo y que los botones que correspondan a espacios sin nada queden deshabilitados y con un fondo negro.

En la versión 3 se me ocurrió crear la celda y el botón a la vez, e ir asignando un identificador y un valor, el valor saldría de 9 arrays que tienen los valores del 1 al 9, del 10 al 19, etc...se recorrerían de arriba hacia abajo,y previamente para que no fuera secuencial se desordena el array y se van asignando valores, se tomarían solo 3 valores y se recorrerian los de la primera columna, despues los de la segunda y así sucesivamente.

Ahora tengo que ver como asignarle un valor y un identificador, el identificador sería del 1 al 27, y el valor el que le toque por el array, estoy un poco atascado en este punto ahora.

Para deshabilitar botones he pensado en poner 4 botones con valor 0, estos valores se asignan recorriendo el cartón de izquierda a derecha fila por fila y poniendo el valor el posiciones aleatorias, la cosa es que cuando el botón tuviera un valor 0 el color se pusiera en negro y el botón se desactivara, esto lo haría para las dos primeras filas, y para la tercera habría que comprobar que en las casillas correspondientes no hubieran todos los botones desactivados, es decir, que los botones de las dos casillas de arriba no tuvieran valor 0, si esto pasara se tendría que repetir el proceso para la última fila asignando valores 0 hasta que todo estuviera bien.

para comprobar una línea o un bingo pienso que se podría hacer un contador, para bingo cada vez que se hace click aumentara un contador que lo diera hasta 15 y para línea,al tener todos los botones habilitados de una y tener su identificador, sumarlos, si los botones de la primera fila suman, por ejemplo, 180, y voy sumando los valores clickados de esa fila, y conforme se van clickando se va añadiendo el valor de ese boton a un array, cuando este valor alcance el valor de la fila se daría linea (el botón cada vez que se clickeara debería deshabilitarse para que no pudiera pulsarse dos veces).

En fín, se agradecen ideas para lograr un enfoque mejor.

 Enfoque del v.2

.button {width:30px;}

    <tr>

    <td><button class="button" id="uno">1</button></td>
    <td><button class="button" id="dos">2</button></td>
    <td><button class="button" id="tres">3</button></td>
    <td><button class="button" id="cuatro">4</button></td>
    <td><button class="button" id="cinco">5</button></td>
    <td><button class="button" id="seis">6</button></td>    
    <td><button class="button" id="siete">7</button></td>
    <td><button class="button" id="ocho">8</button></td>
    <td><button class="button" id="nueve">9</button></td>       
    </tr>
    <tr>
    <td><button class="button" id="diez" >10</button></td>
    <td><button class="button" id="once">11</button></td>
    <td><button class="button" id="doce">12</button></td>
    <td><button class="button" id="trece">13</button></td>
    <td><button class="button" id="catorce">14</button></td>
    <td><button class="button" id="qince">15</button></td>  
    <td><button class="button" id="dieciseis">16</button></td>
    <td><button class="button" id="diecisiete">17</button></td>
    <td><button class="button" id="dieciocho">18</button></td>      
    </tr>
    <tr>
    <td><button class="button" id="diecinueve">19</button></td>
    <td><button class="button" id="veinte">20</button></td>
    <td><button class="button" id="veintiuno">21</button></td>
    <td><button class="button "id="veintidos">22</button></td>
    <td><button class="button "id="veintitres">23</button></td>
    <td><button class="button" id="veinticuatro">24</button></td>   
    <td><button class="button" id="veinticinco">25</button></td>
    <td><button class="button" id="veintiseis">26</button></td>
    <td><button class="button" id="veintisiete">27</button></td>        
    </tr>
    </table>


<script>

document.getElementById("uno").onclick = function(){
        this.style.backgroundColor ="red";
    };
</script>

-------------------------

Enfoque del v3

<style>
#div1 {margin:10px;font-size:1.25em;}
table {border-collapse:collapse;border:1px solid #7f7f7f;background-color: white}
td {border:1px solid #7f7f7f;width:50px;height:50px;text-align:center;}
button{width: 50px;height:50px;background-color: white;border: none;}
</style>

<div id="div1"></div>

<script>

function crearCarton() {

    var div1 = document.getElementById('div1');
    var carton = document.createElement("table");
    var Array1=[1,2,3,4,5,6,7,8,9];
    var Array2=[10,11,12,13,14,15,16,17,18,19];
    var Array3=[20,21,22,23,24,25,26,27,28,29];
    var Array4=[30,21,32,33,34,35,36,37,38,39];
    var Array5=[40,41,42,43,44,45,46,47,48,49];
    var Array6=[50,51,52,53,54,55,56,57,58,59];
    var Array7=[60,61,62,63,64,65,66,67,68,69];
    var Array8=[70,71,72,73,74,75,76,77,78,79];
    var Array9=[80,81,82,83,84,85,86,87,88,89];
    var Array10=[90,91,92,93,94,95,96,97,98,99];

    for (var i = 1; i < 4; i++) {
        var fila = document.createElement("tr");
         for (var j = 0; j < 10; j++) {
            var columna = document.createElement("td");
          var boton=document.createElement("button");
          columna.appendChild(boton);
            fila.appendChild(columna);
        }           

carton.appendChild(fila); 


}


 div1.appendChild(carton); 

creaOrdenaArray1(Array3);

}

function creaOrdenaArray1(Array){

Array.sort(function(a, b){return 0.5 - Math.random()});

}

window.onload=crearCarton; 

7
  • Es interesante lo que pretendes, pero he leído 3 veces tu explicación y, me disculpas, no entiendo casi nada. Hablas de v2 y v3, imagino que son las versiones. Ahora, lo que logro entender es que deseas generar tarjetas de lotería de forma que contenga 27 números escogidos aleatoreamente entre 1 y 99 (asumo no debe haber repeticiones). No capto lo que dices de botones y colores. Exactamente ¿qué deseas lograr? Saludos. Commented el 8 mar. 2019 a las 20:37
  • Exacto, esos botones cuando se diga un numero swran clixkeados con raton, se pondran de loclor rojo, p.e, y asi saldra linea o bingo. Commented el 8 mar. 2019 a las 20:51
  • Ok, es una especie de bingo, y digo "especie" porque existen diferentes modalidades. Ahora, según lo expuesto en tu código, tienes 3 filas con 9 números en cada fila. Al hacer clic sobre un "botón" (imagino que te refieres a la celda), el color cambiará. Ahora, eso de deshabilitar un botón no lo capto. ¿Cuál es el motivo para deshabilitar un botón?. También hablas de poner un valor 0 y de color negro. Allí ya me pierdo. No entiendo bien la lógica de tu lotería o bingo. Commented el 8 mar. 2019 a las 21:13
  • Digo boton porque en cada celda de ese carton he insertafo un boton, el xual tiene, o deberia tener, un id y un value, siendo este value asignado cada vez que se cree un carton. El valor 0 y el color negro es porque los cartones de bingo tienen 12 espacios en negro, a razon de 4 por fila y en cada columna de 3 nunca hay menos de 1 ni mas de 2 espacion en negro. El tema de ponerle a esos botones deshabilitados un valor 0 es para que, viendo su value 0, se cambie el color del boton a negro, y ademas se deshabilite para que no pueda ser pulsado. Commented el 8 mar. 2019 a las 21:51
  • La secuencia seria , cada vez que se crea un carton,crearlo con 27 casillas y 27 botones dentro de cada casilla, y luego deshabilitar 12 de esos botones con esas condiciones para que se conviertan en botones en negro, con value 0(si tiene value 0 se cambiaria su color a black), y deshanilitados de cualquier pulsacion(tambien por tener valor 0). Commented el 8 mar. 2019 a las 21:54

1 respuesta 1

7

Como te dije en mis comentarios, tu idea me pareció interesante y eso me motivó a buscar una solución.

Trataré de explicar paso a paso el proceso para obtener la solución. Será bastante largo.

PROBLEMA

Se desea crear un cartón de lotería o bingo, con las siguientes características:

  1. Debe contener 27 casillas organizadas en 3 filas de 9 columnas cada una.
  2. Cada fila debe contener 5 celdas con números y 4 celdas sin números.
  3. Los números se han de escoger aleatoriamente de un grupo de 99 números (1-99)
  4. Las celdas sin número se han de colorear de negro.
  5. Cada columna debe tener al menos 1 celda sin numero (color negro) y hasta un máximo de 2 celdas sin número (color negro).
  6. Las celdas sin número (12 en total) se han de posicionar aleatoriamente sobre el cartón.
  7. Al hacer clic sobre una celda con número esta cambiará de color, para indicar visualmente que se ha escogido esa celda.
  8. Cuando se complete una línea, se ha de avisar al usuario que se ha ganado el bingo o lotería.

Con estas especificaciones, vamos a crear nuestro cartón de lotería. Espero no haber dejado nada por fuera, y que sean estos los requerimientos del OP.

SOLUCIÓN

En tu pregunta tienes 2 diseños, uno en el cual creas una tabla de forma manual usando HTML, y el otro donde generas la tabla usando JS. Iremos en la segunda dirección, ya que es más eficiente y se escribe menos código.

En primer lugar vamos a crear nuestra plantilla HTML, será simplemente eso, una plantilla sobre la cual vamos volcar nuestro cartón generado en Javascript.

El código para tu plantilla HTML solo va a incluir un elemento div con el atributo id="carton".

<div id="carton"></div>

Eso es todo en HTML, obviamente si deseas agregar un título y otros elementos de diseño pues ya eso es otra cosa.

En segundo lugar, agregaré una hoja de estilos, llamada carton.css que le dará un pequeño estilo al cartón, nada complicado, se puede mejorar pero no voy a profundizar en eso ahora.

Nuestra hoja de estilos quedará de la siguiente forma:

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }

body {
    margin: 0;
  }

table, td {
    border: 1px solid black;
  }

td {
    padding: 1.5rem;
  }

a {
    text-decoration: none;
}

Por último, voy a crear 2 archivos JS, uno tendrá la lógica para generar el cartón, y el otro tendrá la lógica del juego (cambiar color celda seleccionada, cantar bingo al completar una fila).

Lo más complicado, a mi entender, es la lógica para posicionar 12 casillas aleatoriamente sobre el cartón, respetando las especificaciones.

Empezaremos con el problema de generar el cartón, el mismo se va a generar al cargar la página. Con eso ya tenemos una idea, luego se puede adaptar a generar el cartón usando un botón u otro elemento. Nuestra lógica se almacenará en un archivo llamado generarCarton.js

Crearemos una función llamada crearCarton(filas, columnas) la cual aceptará como parámetros el número de filas y el número de columnas. Lo hago así para tener un código reusable.

Nuestra función tendrá simplemente 5 sentencias, es algo así como una pila de llamadas a diferentes funciones utilitarias que nos ayudarán a crear el cartón.

El código es el siguiente:

function crearCarton(filas, columnas) {
    var carton = document.getElementById('carton');
    var valores = generarValores(1, 99);
    var tabla = llenarTabla(valores, filas, columnas);
    tabla = taparTabla(tabla,filas,columnas);
    escribirCarton(tabla, carton, filas, columnas);
}

Como se puede apreciar, creamos una instancia de nuestro elemento div ya que allí vamos a escribir nuestro cartón.

Además, llamamos a 4 funciones: generarValores(inicio, fin), llenarTabla(valores, filas, columnas), taparTabla(tabla, filas, columnas) y escribirCarton(tabla, carton, filas, columnas). Cada función realizará una tarea específica como su nombre lo indica.

La función generarValores(inicio, fin) devuelve un array de números ordenados en un rango que va desde inicio a fin. No he agregado comprobación de errores (casos como inicio >= fin) eso lo dejo de tarea, para este ejemplo omitiré los errores de ese tipo.

Nuestra función queda de la siguiente forma:

function generarValores(inicio, fin) {
    var valores = [];
    for (var i = inicio; i <= fin; i++) {
        valores.push(i);
    }
    return valores;
}

Algo bastante sencillo si se quiere, y además es reusable.

La segunda función que vamos a crear se llama llenarTabla(valores, filas, columnas). Como su nombre lo indica, se encarga de llenar una tabla de dimensión filas x columnas con valores que se escogerán de forma aleatoria del conjunto de valores.

Nuestra función devolverá una tabla llena con valores aleatorios, y usará una función utilitaria para escoger el valor aleatoriamente, y que evita repeticiones. La función queda de la siguiente forma:

function llenarTabla(valores, filas, columnas) {
    var tabla = [];
    for (var i = 0; i < filas; i ++) {
        var fila = [];
        for (var j = 0; j < columnas; j++) {
            var valor = 0;
            [valor, valores] = escogerValor(valores);
            fila.push(valor);
        }
        tabla.push(fila);
    }
    return tabla;
}

Como se puede apreciar, vamos a llenar un array multidimensional, que no es más que un array que contiene a su vez otros array diferentes, todos de la misma dimensión. En esta función hacemos una llamada a otra función: escogerValor(valores), que se encargará de escoger un valor aleatoriamente del conjunto de valores. Esta función devuelve un array que contiene el valor escogido y el array de valores al cual se le ha sustraído el valor escogido, así garantizamos la unicidad de cada valor que asignaremos a las celdas de la tabla.

La función escogerValor(valores) como su nombre lo indica, escoge un valor aleatoriamente del conjunto de valores. Esta función queda de la siguiente manera:

function escogerValor(valores) {
    var indice = Math.round(Math.random() * (valores.length - 1));
    var valor = valores[indice];
    valores.splice(indice,1);
    return [valor, valores];
}

Como se aprecia en esta función, escogemos un índice aleatorio del array de valores. Recordemos que en JS los índices de un array van desde 0 hasta array.length - 1, es por ello que multiplicamos Math.random() por valores.length - 1. Como valores contiene (en este caso) 99 elementos, esto producirá números (flotantes) en el rango de 0.00000... a 98.00000..., y al ser flotantes, simplemente usamos Math.round() para capturar la parte entera de dichos números.

Teniendo el índice escogido aleatoriamente, almacenamos el valor que corresponde a dicho índice en nuestra variable valor.

Luego eliminamos el elemento correspondiente a dicho índice de nuestro array de valores, usando el método splice() del objeto Array.

Por último devolvemos el valor seleccionado y el array que contiene el resto de valores y que no incluye al valor ya seleccionado. Eso es lo que garantiza la unicidad.

Un ejemplo de cómo queda nuestra tabla:

Captura Carton sin tapar

Ahora ya tenemos nuestra tabla con números escogidos al azar, nos queda "tapar" 12 celdas de forma aleatoria. Para esto usamos una función llamada taparTabla(tabla, filas, columnas). Esta función es la más específica de este programa, ya que ha sido diseñada tomando en cuenta las especificaciones del OP. Por lo tanto, si bien se puede adaptar para otras situaciones, no se puede reusar en caso que cambie la cantidad de filas, columnas o número de elementos a "tapar".

Nuestra función queda de la siguiente forma:

function taparTabla(tabla, filas, columnas) {
    var cantTapasFila = 4;
    var tapas = [];
    var valores = generarValores(0, columnas - 1);
    for (var i = 0; i < filas; i++) {
        var tapasFila = [];
        if (i < filas - 1) {
            for (var j = 0; j < cantTapasFila; j++) {
                var valor = 0;
                [valor, valores] = escogerValor(valores);
                tapasFila.push(valor);
            }
        } else {
            tapasFila.push(valores[0]);
            valores = generarValores(0, columnas - 1);
            for (var j = 0; j < cantTapasFila - 1; j++) {
                var valor = 0;
                [valor, valores] = escogerValor(valores);
                tapasFila.push(valor);
            }
        }
        tapas.push(tapasFila);
    }
    for (var i = 0; i < filas; i++) {
        for (var j = 0; j < cantTapasFila; j++) {
            tabla[i][tapas[i][j]] = 0;
        }
    }
    return tabla;
}

Esta función es bastante elaborada, pero lo mejor de todo es que puedo reusar las funciones ya creadas anteriormente. Es siempre una buena práctica el poder escribir funciones, métodos, clases que puedan ser reusados. Es el principio DRY, que en lo personal, lo aprendí escribiendo mucho código, sin orientación alguna, dándome cuenta que debía pensar en reusar siempre cualquier método u objeto creado, para no escribir cosas tan repetitivas. Al pasar los años, leí un libro de POO, y entendí con claridad el principio DRY, que yo venía aplicando sin saber que era un principio. (DRY es un acrónimo en el idioma inglés que significa: Don't Repeat Yourself)

En nuestra función lo primero que tenemos es la cantidad de tapas por fila, que almacenamos en una variable con un nombre sugestivo.

Luego inicializamos un array llamado tapas, que va a contener a su vez 3 array con los índices de las celdas que serán tapadas.

Luego generamos los valores de los índices. Como cada fila tiene n columnas, y conocemos el número de columnas, usamos la función generarValores(). Notemos que el parámetro inicio es cero, y el parámetro final es columnas - 1

Ahora usaremos un bucle que se repetirá (en este caso) 3 veces (desde 0 hasta filas -1), y en cada iteración crearemos un array llamado fila que va a contener los índices de las celdas que vamos a tapar.

Para cumplir con las condiciones (4 celdas tapadas por fila y todas las columnas deben tener al menos 1 celda tapada y máximo 2 celdas tapadas) usaremos un bucle anidado que se ejecutará 4 veces (desde 0 hasta cantTapasFila - 1)

Ahora usaremos un poco de lógica y matemáticas para entender el proceso.

Recordemos que nuestro array de valores contiene índices (del 0 al 8 en este caso)

En cada iteración de nuestro bucle anidado, vamos a escoger un valor (usando nuestra función escogerValor()) de los 9 posibles valores que hemos generado previamente.

Entonces, en la primera iteración de la fila (i = 0), escogemos 4 valores, y los extreamos de nuestro array de valores.

Ahora, para la segunda iteración (i = 1) nuestro array de valores sólo contiene 5 elementos. Nuevamente escogemos 4 elementos, y los extraemos de nuestro array de valores.

Para la última iteración (i = 2) nuestro array de elementos contiene 1 solo elemento. Este debe ser asignado directamente, para asegurar que cada columna contiene al menos 1 celda tapada. Y como los índices escogidos anteriormente no se repiten, podemos escoger libremente los 3 valores restantes, ya que serán únicos para la fila y no importa si se repiten en columna, ya que solo estaría repetido 2 veces, que es el máximo permitido.

Un ejemplo de corrida para entender mejor el proceso sería el siguiente:

  1. Se inicia el bucle (i = 0), valores = [0, 1, 2, 3, 4, 5, 6, 7, 8].
  2. Se inicializa tapasFila = []
  3. Se ejecuta el bucle interno, y se escogen 4 valores.
  4. Se guarda tapasFila en tapas, los valores escogidos: [0, 3 , 8, 4]
  5. (i = 1), valores = [1, 2, 5, 6, 7].
  6. Se inicializa tapasFila = []
  7. Se ejecuta el bucle interno, y se escogen 4 valores.
  8. Se guarda tapasFila en tapas, los valores escogidos: [7, 2, 5, 6]
  9. (i = 2), valores = [1].
  10. Se inicializa tapasFila = []
  11. Como es la última iteración por fila, asignamos el valor (1) a tapasFila
  12. Generamos un nuevo array con valores (del 0 al 9)
  13. Extraemos el elemento que corresponde a (1).
  14. Escogemos 3 elementos aleatoriamente.
  15. Se guarda tapasFila en tapas, los valores escogidos: [1, 4, 8, 2].
  16. Termina el bucle.

Al finalizar este ciclo, tenemos un array llamado tapas que contiene los índices de las filas que vamos a "tapar" en nuestra tabla.

Para hacerlo, recorremos nuestra tabla y cada vez que pasemos por el índice indicado, ponemos la celda en 0. Según la especificación del OP. Esto nos va a permitir luego colorear la celda de negro. Con esto ya tenemos la tabla con los valores tapados.

Un ejemplo de cómo quedaría nuestra tabla sin colorear las celdas:

Carton con celdas tapadas (puestas a cero)

Por último nos queda escribir la tabla en HTML y colorear según sea necesario.

Para lograrlo usaremos la función escribirCarton(tabla, carton, filas, columnas), a la cual le pasamos los elementos necesarios para realizar la tarea. Nuestra función queda de la siguiente manera:

function escribirCarton(tabla, carton, filas, columnas) {
    var tablaHtml = '<table>';
    for (var i = 0; i < filas; i++) {
        tablaHtml += '<tr>';
        for (var j = 0; j < columnas; j++) {
            var id = 'fila' + i + 'col' + j;
            tabla[i][j] == 0 ? tablaHtml += '<td style="background: black;">' : tablaHtml += '<td class="active" id="' + id + '" style="cursor: pointer;">';
            tablaHtml += tabla[i][j];
            tabla[i][j] == 0 ? tablaHtml += '</td>' : tablaHtml += '</td>';
        }
        tablaHtml += '</tr>';
    }
    tablaHtml += '</table>';
    carton.innerHTML = tablaHtml;
}

Como podemos observar, nuestra función recorre la tabla que hemos pasado como parámetro y genera el código HTML adecuado.

Cuando se consigue una celda en cero ("tapada") se agrega el estilo adecuado (background: black;), al resto de las celdas se le agrega un id construido mediante el número de fila y columna correspondiente, por lo tanto cada id será único. El formato del id es claro: filaNcolM, donde N y M corresponden a los índices de posición de la celda.

Adicionalmente, a cada celda no tapada, se le agrega una clase active y se marca un estilo de cursor pointer, para que la celda parezca un enlace o hipervínculo al posicionar el ratón sobre ella.

De esta forma nuestra tabla queda lista para jugar.

Carton listo para jugar

Ahora escribiremos la lógica del juego. Esto la haremos en un archivo diferente, al cual llamaremos jugarBingo.js El contenido de nuestro archivo es el siguiente:

var numeros = document.querySelectorAll('td.active');
var fila0 = [];
var fila1 = [];
var fila2 = [];
numeros.forEach(function(element) {
    element.onclick = function (e) {
        e.preventDefault();
        var celda = this.getAttribute('id');
        var fila = parseInt(celda.substring(4,5));
        switch (fila) {
            case 0:
                if (fila0.includes(celda)) {
                    fila0.splice(fila0.indexOf(celda),1);
                    this.setAttribute('style', '');
                    this.setAttribute('style', 'cursor: pointer;');
                } else {
                    fila0.push(celda);
                    this.setAttribute('style', 'background: lightgreen; cursor: pointer;');
                }
                break;
            case 1:
                if (fila1.includes(celda)) {
                    fila1.splice(fila1.indexOf(celda),1);
                    this.setAttribute('style', '');
                    this.setAttribute('style', 'cursor: pointer;');
                } else {
                    fila1.push(celda);
                    this.setAttribute('style', 'background: lightgreen; cursor: pointer;');
                }
                break;
            case 2:
                if (fila2.includes(celda)) {
                    fila2.splice(fila2.indexOf(celda),1);
                    this.setAttribute('style', '');
                    this.setAttribute('style', 'cursor: pointer;');
                } else {
                    fila2.push(celda);
                    this.setAttribute('style', 'background: lightgreen; cursor: pointer;');
                }
                break;
            default:
        }
        if(fila0.length == 5 || fila1.length == 5 || fila2.length == 5) {
            console.log('BINGO');
            window.alert('Usted ha ganado!!!');
        }
    }
});

Como podemos apreciar en nuestro código, lo primero que hacemos es instanciar un array que contiene las celdas de números activas. Para eso usamos el selector document.querySelectorAll('td.active'). Luego inicializamos tres array llamados fila0, fila1, fila2 que servirá para almacenar los valores escogidos en nuestro cartón según la fila a la que pertenezcan.

Aqui hay una posibilidad para optimizar, pero para este ejemplo lo dejaré de esta forma. La optimización la dejo de tarea.

Usaremos un bloque condicional switch ... case para ir almacenando los valores seleccionados (clicados por el usuario) en el correpondiente array.

Cada vez que se hace clic en una celda, nuestro programa verifica si el elemento existe en el array correspondiente. Si el elemento existe entonces lo sacamos del array, en cambio si no existe lo agregamos. Esto tiene como objetivo permitir que un usuario deshaga la selección realizada, en caso de equivocación.

Por útlimo, se verifica el tamaño de cada array, si alguno contiene 5 elementos entonces se ha completado una línea y se puede cantar 'BINGO'.

Esta sería una manera de completar la tarea. No es nada muy elaborado, pero merece la pena revisar cada parte del código y entender el porqué de cada cosa.

Una muestra mínima de lo que se puede hacer con HTML, CSS y Javascript y un editor de texto.

Espero que sea la respuesta que buscabas.

A continuación dejo una implementación completa para que se vea su funcionamiento:

// ESTO VA EN EL ARCHIVO generarCarton.js
function crearCarton(filas, columnas) {
    var carton = document.getElementById('carton');
    var valores = generarValores(1, 99);
    var tabla = llenarTabla(valores, filas, columnas);
    tabla = taparTabla(tabla,filas,columnas);
    escribirCarton(tabla, carton, filas, columnas);
}

function escribirCarton(tabla, carton, filas, columnas) {
    var tablaHtml = '<table>';
    for (var i = 0; i < filas; i++) {
        tablaHtml += '<tr>';
        for (var j = 0; j < columnas; j++) {
            var id = 'fila' + i + 'col' + j;
            tabla[i][j] == 0 ? tablaHtml += '<td style="background: black;">' : tablaHtml += '<td class="active" id="' + id + '" style="cursor: pointer;">';
            tablaHtml += tabla[i][j];
            tabla[i][j] == 0 ? tablaHtml += '</td>' : tablaHtml += '</td>';
        }
        tablaHtml += '</tr>';
    }
    tablaHtml += '</table>';
    carton.innerHTML = tablaHtml;
}

function taparTabla(tabla, filas, columnas) {
    var cantTapasFila = 4;
    var tapas = [];
    var valores = generarValores(0, columnas - 1);
    for (var i = 0; i < filas; i++) {
        var tapasFila = [];
        if (i < filas - 1) {
            for (var j = 0; j < cantTapasFila; j++) {
                var valor = 0;
                [valor, valores] = escogerValor(valores);
                tapasFila.push(valor);
            }
        } else {
            tapasFila.push(valores[0]);
            valores = generarValores(0, columnas - 1);
            for (var j = 0; j < cantTapasFila - 1; j++) {
                var valor = 0;
                [valor, valores] = escogerValor(valores);
                tapasFila.push(valor);
            }
        }
        tapas.push(tapasFila);
    }
    for (var i = 0; i < filas; i++) {
        for (var j = 0; j < cantTapasFila; j++) {
            tabla[i][tapas[i][j]] = 0;
        }
    }
    return tabla;
}



function llenarTabla(valores, filas, columnas) {
    var tabla = [];
    for (var i = 0; i < filas; i ++) {
        var fila = [];
        for (var j = 0; j < columnas; j++) {
            var valor = 0;
            [valor, valores] = escogerValor(valores);
            fila.push(valor);
        }
        tabla.push(fila);
    }
    return tabla;
}

function escogerValor(valores) {
    var indice = Math.round(Math.random() * (valores.length - 1));
    var valor = valores[indice];
    valores.splice(indice,1);
    return [valor, valores];
}

function generarValores(inicio, fin) {
    var valores = [];
    for (var i = inicio; i <= fin; i++) {
        valores.push(i);
    }
    return valores;
}

window.onload = crearCarton(3,9);

// FIN generarCarton.js

// ESTO VA EN EL ARCHIVO jugarBingo.js
var numeros = document.querySelectorAll('td.active');
var fila0 = [];
var fila1 = [];
var fila2 = [];
numeros.forEach(function(element) {
    element.onclick = function (e) {
        e.preventDefault();
        var celda = this.getAttribute('id');
        var fila = parseInt(celda.substring(4,5));
        switch (fila) {
            case 0:
                if (fila0.includes(celda)) {
                    fila0.splice(fila0.indexOf(celda),1);
                    this.setAttribute('style', '');
                    this.setAttribute('style', 'cursor: pointer;');
                } else {
                    fila0.push(celda);
                    this.setAttribute('style', 'background: lightgreen; cursor: pointer;');
                }
                break;
            case 1:
                if (fila1.includes(celda)) {
                    fila1.splice(fila1.indexOf(celda),1);
                    this.setAttribute('style', '');
                    this.setAttribute('style', 'cursor: pointer;');
                } else {
                    fila1.push(celda);
                    this.setAttribute('style', 'background: lightgreen; cursor: pointer;');
                }
                break;
            case 2:
                if (fila2.includes(celda)) {
                    fila2.splice(fila2.indexOf(celda),1);
                    this.setAttribute('style', '');
                    this.setAttribute('style', 'cursor: pointer;');
                } else {
                    fila2.push(celda);
                    this.setAttribute('style', 'background: lightgreen; cursor: pointer;');
                }
                break;
            default:
        }
        if(fila0.length == 5 || fila1.length == 5 || fila2.length == 5) {
            console.log('BINGO');
            window.alert('BINGO: Usted ha ganado!!!');
        }
    }
});

// FIN jugarBingo.js
html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }

body {
    margin: 0;
  }

main {
    display: block;
  }

table, td {
    border: 1px solid black;
  }

td {
    padding: 1.5rem;
  }

a {
    text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Aqui cargas el CSS >
    
    <link rel="stylesheet" href="carton.css">
    
    -->
    <title>Carton de bingo</title>
</head>
<body>
    <div id="carton"></div>
    <!-- Aqui van los scripts >
    
    <script src="generarCarton.js"></script>
    <script src="jugarBingo.js"></script>
    
    -->
</body>
</html>

5
  • 1
    +1 Sin entrar a valorar la calidad o eficiencia del código ... ¡ Te lo has currao ! :-O
    – Trauma
    Commented el 9 mar. 2019 a las 15:03
  • @Trauma Gracias!!! Commented el 9 mar. 2019 a las 15:11
  • 1
    A esto yo le llamo maestría!!! Commented el 9 mar. 2019 a las 15:15
  • Gracias @AlbertoBedmarMontaño, me gusta programar y resolver problemas, es todo. Commented el 9 mar. 2019 a las 15:18
  • Vale, estoy de acuerdo, pero no pienso retirar lo de maestría!!! :) Commented el 9 mar. 2019 a las 15:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.