Un patrón de tablero de ajedrez se puede crear muy fácilmente utilizando JavaScript y el concepto de módulo de objeto de documento (DOM). Con este método, puede crear un tablero de ajedrez con la cantidad de filas y columnas que desee con solo ajustar algunos parámetros. Además, las líneas de código escritas con este método también serán mucho menores que las creadas con HTML y CSS puros, especialmente cuando la cantidad de filas y columnas es muy grande.
Enfoque: cree un bucle for anidado. Llamemos al bucle exterior «i» y al bucle interior «j». El bucle exterior se utilizará para crear filas y el bucle interior se utilizará para crear celdas en cada columna. Al hacerlo, se crearán N*M celdas donde N es el número de filas y M es el número de columnas. La combinación de los valores i y j en el bucle interno se puede utilizar para distinguir entre cada celda así formada. Al final del ciclo, tendremos una tabla creada. Además, necesitamos colorear las celdas con un color apropiado. Si la suma de i y j da un número par, entonces la celda debe ser de color blanco, de lo contrario, debe ser de color negro. Esto creará celdas de colores alternativos de blanco y negro como se ve en un tablero de ajedrez. La creación de tablas y celdas de tablas se puede hacer usando DOM y la coloración de las celdas se puede hacer usando CSS.
A continuación se muestra la implementación del enfoque anterior.
Nombre de archivo: index.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chess board</title>
<style>
body {
text-align: center;
}
.cell {
height: 30px;
width: 30px;
border: 1.5px solid grey;
border-style: inset;
}
.blackcell {
background-color: black;
}
.whitecell {
background-color: white;
}
</style>
</head>
<body>
<span style="color:green; font-size:30px;">
GeeksforGeeks
</span>
<br><br>
<script type="text/javascript">
// Create a center tag to center all the elements
var center = document.createElement('center');
// Create a table element
var ChessTable = document.createElement('table');
for (var i = 0; i < 8; i++) {
// Create a row
var tr = document.createElement('tr');
for (var j = 0; j < 8; j++) {
// Create a cell
var td = document.createElement('td');
// If the sum of cell coordinates is even
// then color the cell white
if ((i + j) % 2 == 0) {
// Create a class attribute for all white cells
td.setAttribute('class', 'cell whitecell');
tr.appendChild(td);
}
// If the sum of cell coordinates is odd then
// color the cell black
else {
// Create a class attribute for all black cells
td.setAttribute('class', 'cell blackcell');
// Append the cell to its row
tr.appendChild(td);
}
}
// Append the row
ChessTable.appendChild(tr);
}
center.appendChild(ChessTable);
// Modifying table attribute properties
ChessTable.setAttribute('cellspacing', '0');
ChessTable.setAttribute('width', '270px');
document.body.appendChild(center);
</script>
</body>
</html>
Producción:
Producción
Explicación del código:Se creará un tablero de ajedrez de 8 x 8 para el código anterior. Sin embargo, simplemente modificando la condición de terminación de i y j, podremos crear un tablero de ajedrez N x M con facilidad. Usando Javascript DOM, un elemento de tabla se crea inicialmente usando createElement(). sabemos que el bucle i se usa para crear filas, por lo tanto, se creará un elemento de fila durante cada iteración. De manera similar, el bucle j es responsable de crear celdas. Por lo tanto, las celdas de la tabla se crean durante cada iteración. Como se discutió antes, el color de cada celda se puede decidir mediante la suma de los valores i y j. Si la suma es par, la celda debe ser de color blanco y si es impar, la celda debe ser de color negro. Esto se hace creando y asignando un atributo de clase apropiado a cada celda usando setAttribute() y asignando el color, tamaño y tamaño correctos. y otras propiedades que desee utilizando CSS. Al final, todos los elementos se agregan dentro del cuerpo del documento HTML. Por lo tanto, podemos crear un patrón de tablero de ajedrez simple usando javascript y DOM muy fácilmente.
Publicación traducida automáticamente
Artículo escrito por laxmanbalaraman y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA