1
resposta

Tabuleiro de xadrez, fornecendo o tamanho do lado

Minha ideia foi especificar o tamanho do lado para um tabuleiro de xadrez.

Uma vez pronta a função de quadrados com contornos, pode-se definir se ele fica "sem contorno" (= tem o contorno da cor do corpo)

Os índices dos loops "for" para linhas e colunas, se pares ou ímpares, definem o padrão de alternância de cores.

tabuleiro de lado 40

Código:

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');

    function desenhaQuadrado (origemX, origemY, lado, preenche, contorno) {

        // estilo de preenchimento
        pincel.fillStyle = preenche;
        // quadrado 
        pincel.fillRect (origemX, origemY, lado, lado)

        // estilo de tracado
        pincel.strokeStyle = contorno;
        // contorno do quadrado
        pincel.strokeRect (origemX, origemY, lado, lado)
    }

    function tabuleiroXadrez (tamanhoLado){
        // para cada linha do tabuleiro 
        for (i=0; i<8; i++){
            if ((i%2)==0){
                // se for linha impar - observando que a indexacao comeca de zero
                // começa com quadrado branco
                for (j=0; j<8; j++){
                    if ((j%2)==0){
                        // se for coluna ímpar - observando que a indexacao comeca de zero
                        // desenha quadrado branco
                        desenhaQuadrado ((tamanhoLado*i), (tamanhoLado*j), tamanhoLado, 'white', 'black');
                    }
                    else {
                        // se for coluna par
                        // desenha quadrado preto
                        desenhaQuadrado ((tamanhoLado*i), (tamanhoLado*j), tamanhoLado, 'black', 'black');
                    }
                }
            }
            else {
                // se for linha par - observando que a indexacao comeca de zero
                // começa com quadrado preto
                for (j=0; j<8; j++){
                    if ((j%2)==0){
                        // se for coluna ímpar - observando que a indexacao comeca de zero
                        // desenha quadrado preto
                        desenhaQuadrado ((tamanhoLado*i), (tamanhoLado*j), tamanhoLado, 'black', 'black');
                    }
                    else {
                        // se for coluna par
                        // desenha quadrado branco
                        desenhaQuadrado ((tamanhoLado*i), (tamanhoLado*j), tamanhoLado, 'white', 'black');
                    }
                }

            }
        }
    }
    tabuleiroXadrez (40);
</script>
1 resposta

Muito bom, parabéns!

Ainda não estou nesse nível, rsrsrsr;