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:
- Debe contener 27 casillas organizadas en 3 filas de 9 columnas cada una.
- Cada fila debe contener 5 celdas con números y 4 celdas sin números.
- Los números se han de escoger aleatoriamente de un grupo de 99 números (1-99)
- Las celdas sin número se han de colorear de negro.
- 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).
- Las celdas sin número (12 en total) se han de posicionar aleatoriamente sobre el cartón.
- Al hacer clic sobre una celda con número esta cambiará de color, para indicar visualmente que se ha escogido esa celda.
- 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:
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:
- Se inicia el bucle (
i = 0
), valores = [0, 1, 2, 3, 4, 5, 6, 7, 8]
.
- Se inicializa
tapasFila = []
- Se ejecuta el bucle interno, y se escogen 4 valores.
- Se guarda
tapasFila
en tapas
, los valores escogidos: [0, 3 , 8, 4]
- (
i = 1
), valores = [1, 2, 5, 6, 7]
.
- Se inicializa
tapasFila = []
- Se ejecuta el bucle interno, y se escogen 4 valores.
- Se guarda
tapasFila
en tapas
, los valores escogidos: [7, 2, 5, 6]
- (
i = 2
), valores = [1]
.
- Se inicializa
tapasFila = []
- Como es la última iteración por fila, asignamos el valor (1) a
tapasFila
- Generamos un nuevo
array
con valores (del 0 al 9)
- Extraemos el elemento que corresponde a (1).
- Escogemos 3 elementos aleatoriamente.
- Se guarda
tapasFila
en tapas
, los valores escogidos: [1, 4, 8, 2].
- 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:
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.
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>