[Proyecto] Tablero de Ajedrez con Canva | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Les comparto mi código para hacer un tablero de ajedrez utilizando lo aprendido en esta clase, un sigo intentando resolver si es posible hacer un ciclo for para dibujar los cuadros del tablero.

<!DOCTYPE html>
<html lang="es-419">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juegos y animaciones</title>
</head>
<body>
    <canvas width="400" height="400" id="canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

// Declaracion de variables y clases
const pantalla = document.querySelector('#canvas');
const pincel = pantalla.getContext("2d");

// Declaración de funciones
dibujar = (x, y, w, h, color) => {
    pincel.fillStyle = color;
    pincel.fillRect(x, y, w, h);
}

cargaDocumento = () => {
    dibujar(0, 0, 50, 50, 'lightgray');
    dibujar(50, 0, 50, 50, '#3c3c3c');
    dibujar(100, 0, 50, 50, 'lightgray');
    dibujar(150, 0, 50, 50, '#3c3c3c');
    dibujar(200, 0, 50, 50, 'lightgray');
    dibujar(250, 0, 50, 50, '#3c3c3c');
    dibujar(300, 0, 50, 50, 'lightgray');
    dibujar(350, 0, 50, 50, '#3c3c3c');

    dibujar(0, 50, 50, 50, '#3c3c3c');
    dibujar(50, 50, 50, 50, 'lightgray');
    dibujar(100, 50, 50, 50, '#3c3c3c');
    dibujar(150, 50, 50, 50, 'lightgray');
    dibujar(200, 50, 50, 50, '#3c3c3c');
    dibujar(250, 50, 50, 50, 'lightgray');
    dibujar(300, 50, 50, 50, '#3c3c3c');
    dibujar(350, 50, 50, 50, 'lightgray');

    dibujar(0, 100, 50, 50, 'lightgray');
    dibujar(50, 100, 50, 50, '#3c3c3c');
    dibujar(100, 100, 50, 50, 'lightgray');
    dibujar(150, 100, 50, 50, '#3c3c3c');
    dibujar(200, 100, 50, 50, 'lightgray');
    dibujar(250, 100, 50, 50, '#3c3c3c');
    dibujar(300, 100, 50, 50, 'lightgray');
    dibujar(350, 100, 50, 50, '#3c3c3c');

    dibujar(0, 150, 50, 50, '#3c3c3c');
    dibujar(50, 150, 50, 50, 'lightgray');
    dibujar(100, 150, 50, 50, '#3c3c3c');
    dibujar(150, 150, 50, 50, 'lightgray');
    dibujar(200, 150, 50, 50, '#3c3c3c');
    dibujar(250, 150, 50, 50, 'lightgray');
    dibujar(300, 150, 50, 50, '#3c3c3c');
    dibujar(350, 150, 50, 50, 'lightgray');

    dibujar(0, 200, 50, 50, 'lightgray');
    dibujar(50, 200, 50, 50, '#3c3c3c');
    dibujar(100, 200, 50, 50, 'lightgray');
    dibujar(150, 200, 50, 50, '#3c3c3c');
    dibujar(200, 200, 50, 50, 'lightgray');
    dibujar(250, 200, 50, 50, '#3c3c3c');
    dibujar(300, 200, 50, 50, 'lightgray');
    dibujar(350, 200, 50, 50, '#3c3c3c');

    dibujar(0, 250, 50, 50, '#3c3c3c');
    dibujar(50, 250, 50, 50, 'lightgray');
    dibujar(100, 250, 50, 50, '#3c3c3c');
    dibujar(150, 250, 50, 50, 'lightgray');
    dibujar(200, 250, 50, 50, '#3c3c3c');
    dibujar(250, 250, 50, 50, 'lightgray');
    dibujar(300, 250, 50, 50, '#3c3c3c');
    dibujar(350, 250, 50, 50, 'lightgray');

    dibujar(0, 300, 50, 50, 'lightgray');
    dibujar(50, 300, 50, 50, '#3c3c3c');
    dibujar(100, 300, 50, 50, 'lightgray');
    dibujar(150, 300, 50, 50, '#3c3c3c');
    dibujar(200, 300, 50, 50, 'lightgray');
    dibujar(250, 300, 50, 50, '#3c3c3c');
    dibujar(300, 300, 50, 50, 'lightgray');
    dibujar(350, 300, 50, 50, '#3c3c3c');

    dibujar(0, 350, 50, 50, '#3c3c3c');
    dibujar(50, 350, 50, 50, 'lightgray');
    dibujar(100, 350, 50, 50, '#3c3c3c');
    dibujar(150, 350, 50, 50, 'lightgray');
    dibujar(200, 350, 50, 50, '#3c3c3c');
    dibujar(250, 350, 50, 50, 'lightgray');
    dibujar(300, 350, 50, 50, '#3c3c3c');
    dibujar(350, 350, 50, 50, 'lightgray');
}

// Asignación de eventos
window.addEventListener('DOMContentLoaded', cargaDocumento);