Probablemente tu profesor del curso lo que te pide es que pintes un array bidimensional y que por cada iteración en función de la posición y si el número del primer array verso al del segundo es par - impar / impar - par implementes una clase al elemento en cuestión.
Puesto que es un ejercicio tuyo, te indicaré cómo lo haría yo sin resolverte el ejercicio del todo, y si tienes dudas lo comentas por aquí.
var br = document.createElement("br"); // Creamos los elementos que podemos fuera del loop para no sobrecargar el DOM
var section = document.querySelector('#tablero');
// El bucle iterará 8 veces (de 0 a 7), que son las filas que tiene un tablero de ajedrez,
// y por cada iteración en una fila se efectuarán las iteración por columnas que este tiene (8)
for (var i = 0; i <= 7; i++) { // Iteración por "fila"
var fila = document.createElement("div"); // Para aplicar saltos de línea separamos las filas
section.appendChild(fila);
for (var j = 0; j <= 7; j++) { // La misma iteración pero pintando los cuadrados indivualmente
var element = document.createElement("div");
fila.appendChild(element);
if (i % 2 == 0 && j % 2 != 0 || i % 2 != 0 && j % 2 == 0) { // Aquí vemos si la relación fila-columna es par o impar, de esta manera implementaremos de manera alternada una clase para aplicarle por css un background distinto y hacer el efecto de tablero de ajedrez
element.classList.add('oscuro');
}
}
}
#tablero {
display: flex;
}
div {
/* Todas las cuadrículas tienen el mismo ancho/alto/borde */
width: 50px;
height: 50px;
border: 1px solid black;
}
.oscuro {
background-color: #c69b7c;
}
<section id="tablero"></section>
Cabe destacar que es para que te hagas a la idea de cómo sería una de las múltiples formas de hacerlo.
Viendo que además tienes dos variables para recoger via prompt()
los valores de ancho y alto de la cuadrícula, sólo tendrías que pasar esas variables a i
y j
respectivamente.
Por otro lado, si te piden que uses functiones y demás utilidades de Js, puedes sustituir y externalizar cosas como el loop, que pase por referencia por ejemplo de manera dinámica el iterador, usando un solo for
. Pero mi recomendación si estás aprendiendo Javascript es que tengas claros lo conceptos básicos del lenguaje aplicables mediante algoritmia básica cómo este ejercicio, y después vayas escalando y cambiando el código con conceptos nuevos.
EDITO:
Si quisieras hacerlo un juego de ajedrez "real" podrías usar la librería jquery-ui
utilizando el método dragable()
para poder mover los elementos del con dicho método, pero te recomendaría asignar las posiciones de a1
a h8
para las casillas en un primer loop. Básicamente consistiría en crear objetos para cada tipo de pieza con identificadores para negras y blancas, y asignarle a cada uno de estos objetos clases comunas para cosas como la permisividad de movimiento, la posición inicial, o funciones especiales para los peones cómo la coronación, entre otras.