Aprender a programar no solo consiste en entender los conceptos teóricos detrás de un lenguaje de programación, también requiere que repasemos estos conceptos con distintos ejercicios. Por ello, en este post, te explicaremos cómo crear un tablero de ajedrez en JavaScript para repasar el concepto de bucles en este lenguaje.
¿Por qué crear un tablero de ajedrez en JavaScript?
Además de ser una gran manera de repasar lo que hemos aprendido sobre bucles, (como el bucle do-while y los bucles for) crear un tablero de ajedrez en JavaScript nos recuerda que la programación es una forma de modelar o hacer una abstracción de la vida real. A su vez, el tablero de ajedrez es uno de los primeros juegos que se volvieron disponibles en computación, por su lógica clara y de pocos elementos.
¿Cómo crear un tablero de ajedrez en JavaScript?
Crear un tablero de ajedrez en JavaScript requiere que nos preguntemos: ¿cómo podemos representar un tablero de ajedrez? Es importante definir que un tablero de ajedrez no es más que una secuencia de ocho casillas blancas y negras que se repite en varias filas. Entonces, para crear la primera fila de nuestro tablero, podemos usar el comando console.log y representar cada color con las iniciales N y B. Podemos intercalar esta secuencia en nuestra siguiente línea de código para crear la segunda fila, como puedes ver a continuación del proceso para cómo hacer una tabla de ajedrez:
console.log (‘B N B N B N B N’)
console.log (‘N B N B N B N B’)
Para crear un tablero de ajedrez en JavaScript, podríamos simplemente copiar estas dos filas cuatro veces para crear las ocho columnas que conforman un tablero de ajedrez. Para ver el resultado de esta edición en el terminal de Visual Studio Code, te invitamos a leer nuestro post sobre cómo ejecutar el código de JavaScript.
A pesar de que esta forma de crear un tablero de ajedrez en JavaScript funciona, no es una manera sostenible de crear un código, pues es propensa a repetir errores. ¿Qué pasa si hemos cometido un error en la secuencia del tablero de ajedrez en JavaScript? En ese caso, hemos repetido este error en ocho líneas de código. Además, si el número de columnas o filas que queremos en nuestro tablero cambia, necesitaríamos editarlas una a una. Por tanto, ¿cómo logramos crear un tablero de ajedrez en JavaScript que sea más flexible?
Para hacer que nuestro tablero de ajedrez sea más flexible, podemos utilizar los patrones que existen dentro del tablero. Entonces, en el proceso de cómo hacer una tabla de ajedrez, sabemos que las líneas 1, 3, 5 y 7 tienen la misma secuencia de casillas blanco y negro. Esto sucede también con las líneas 2, 4 , 6 y 8. Con estos patrones, podemos crear las siguientes constantes del tablero de ajedrez:
const filaPar = ‘N B N B N B N B’;
const filaImpar = ‘B N B N B N B N’
Para utilizar estas constantes, podemos crear un bucle que imprima de forma alternativa estas filas en la pantalla. Para esto, podemos usar un bucle for, que, según el valor de la variable, imprima la fila par o la impar. Aquí es donde el operador aritmético de módulo se vuelve relevante, pues nos permite saber si un número es par fácilmente. Recuerda que un bucle nos permite repetir una acción de forma indefinida o hasta que su propia función lo haga detenerse.
Te demostramos exactamente cómo crear este bucle con las siguientes líneas de código para tablero de ajedrez en JavaScript:
for (let i= 0; i< 8: i++) {
if (i%2 === 0) {
console.log (filaPar)
} else {
console.log (filaImpar)
Entonces, siguiendo sobre el proceso de cómo hacer una tabla de ajedrez, lo que este bucle ha definido es una variable i que empieza en el número 0 y que el bucle continuará siempre que esta variable i sea menor a ocho. Además, con cada bucle habrá un incremento de una unidad, introducido por el operados aritmético ++.
Ya que la variable ha empezado en cero, habrá ocho repeticiones en total del bucle. Para hacer que estas repeticiones pinten filas diferentes, hemos definido que, si el modulo de i por 2 es 0, es decir, si el valor es par, pintará la filaPar. Con la palabra clave else, le hemos dicho al programa que, cuando lo anterior no es cierto, pinte la filaImpar.
Ahora, para mejorar esta función para el tablero de ajedrez, podemos crear un tablero de ajedrez en JavaScript que, además, tenga parametrizadas el número de filas totales de su tablero. Para ello, podemos crear una constante que defina el número de filas, como puedes ver a continuación:
const totalFilas = 8
Por lo tanto, en lugar de escribir el parámetro i<8 en nuestro bucle, podríamos escribir el parámetro i < totalFilas. Esto nos permitiría cambiar el valor de filas que queremos desde la constante directamente, en vez de hacerlo desde el bucle. Ahora, si también quisiéramos parametrizar el número de columnas, lo mejor sería anidar bucles. Si quieres aprender cómo hacer esto, te invitamos a leer nuestro post sobre cómo anidar bucles en JavaScript y seguir conformando el tablero de ajedrez en JavaScript.
¿Te animas a seguir aprendiendo?
Después de leer este post, no solo sabes cómo crear un tablero de ajedrez en JavaScript, sino que, además, has dado un paso en tu camino en el desarrollo con este lenguaje de programación. Ahora que has puesto en práctica tu conocimiento sobre bucles, te invitamos a seguir aprendiendo con nosotros en un espacio con la mezcla perfecta entre teoría y práctica: nuestro Desarrollo Web Full Stack Bootcamp. ¿Te animas a seguir aprendiendo? ¡No lo dudes más e inscríbete para convertirte en un experto del sector IT en muy pocos meses!
