Entrar Ainda não tem acesso?
4
respostas

Tabuleiro de Xadrez - Seria essa a melhor forma?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Como eu amo esse tal de loop!

por Allan Machado Sobral
| 113k xp | 29 posts

Boa tarde,

Tentei algumas formas de fazer um tabuleiro de xadrez, e esta foi a que melhor encontrei. Teria alguma outra mais lógica, com menos loops?

OBS: ignorem a cor e o tamanho, a intenção era o quadriculado de cores alternadas :D

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");



    function desenharQuadrado(cor, x, y , largura, altura){
        pincel.fillStyle =cor;
        pincel.fillRect(x,y,largura,altura);

        pincel.strokeStyle = "black";  //aqui definimos uma borda para o quadrado
        pincel.strokeRect(x,y,largura,altura); // paramtros iguais do fillRect(x,y,largura,altura)

    }



    for(x = 0; x < 600; x = x + 100){
        for(y = 0; y < 400; y = y + 100){
            desenharQuadrado("green",x, y, 50, 50);
        }

    }

    for(x = 0; x < 600; x = x + 100){
        for(y = 50; y < 400; y = y + 100){    
            desenharQuadrado("red",x, y, 50, 50);
        }
    }

for(x = 50; x < 600; x = x + 100){
        for(y = 50; y < 400; y = y + 100){
            desenharQuadrado("green",x, y, 50, 50);
        }

    }

    for(x = 50; x < 600; x = x + 100){
        for(y = 0; y < 400; y = y + 100){    
            desenharQuadrado("red",x, y, 50, 50);
        }
    }
</script>
4 respostas
por Allan Machado Sobral
| 113k xp | 29 posts

Fui fazendo alguns testes, e vendo outros códigos, cheguei a uma solução melhor :D

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");



    function desenharQuadrado(cor, x, y , largura, altura){
        pincel.fillStyle =cor;
        pincel.fillRect(x,y,largura,altura);

        pincel.strokeStyle = "black";  //aqui definimos uma borda para o quadrado
        pincel.strokeRect(x,y,largura,altura); // paramtros iguais do fillRect(x,y,largura,altura)

    }

    var conta = 1;
    for(x = 0; x < 600; x = x + 50){
        for(y = 0; y<400; y = y+50){
            if(conta % 2 == 0){
                desenharQuadrado("red",x,y,50,50);
            }else{
                desenharQuadrado("green",x,y,50,50);
            }
            conta++;
        }
        conta++;
    }

</script>
por Rodrigo Colucci
| 76.3k xp | 65 posts
Fundador Escola de Celular

ficou muito legal, mas não consegui entender a lógica do final, o primeiro for é pra preencher o eixo x e o segundo for é para preencher o eixo y, teria como você comentar e me explicar o final?

if(conta % 2 == 0){
                desenharQuadrado("red",x,y,50,50);
            }else{
                desenharQuadrado("green",x,y,50,50);
            }
            conta++;
        }
        conta++;
    }
por Allan Machado Sobral
| 113k xp | 29 posts

Ah sim! Nesse caso, ao final do preenchimento da primeira coluna (eixo Y) o "contador" termina como numero IMPAR (9) , e ao voltar pro laço FOR, ele iria preencher o primeiro quadrado da segunda coluna com a cor VERDE novamente, o que iria resultar em linhas da mesma cor, e não com cores intercaladas. Para evitar isso, eu adiciono +1 ao "contador" após terminar a coluna (eixo Y) , assim quando ele voltar para o laço, sera um numero PAR(10), preenchendo com vermelho o próximo quadrado, resultando neste xadrez. Entendeu?

por EVALDO LUIZ CAVALCANTI
| 201.3k xp | 265 posts

Muito bom.