Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Alternativa para fazer blocos de quadrados

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 Leonardo Gouvêa Silva
| 71.1k xp | 42 posts

Olá pessoal, estava estudando uma alternativa para montar um bloco horizontal com 14 blocos quadrados 50x50 lado a lado. Ao meu ver, esse código abaixo funcionaria, mas quando rodo, ele gera só um quadrado, como se o laço do 'for' estivesse sendo quebrado. Onde está o erro?

<meta = charset='UTF-8'>

<canvas width="600" height="400"></canvas>


<script>

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

    var nQuadrados = 14
    var incremento = 50

    for(var contador = 1; contador <= nQuadrados; contador++) {

        function desenhaQuadrado (x0, y0, h, l, colour) {

            pincel.fillStyle = colour;
            pincel.fillRect(x0 + incremento, y0, h, l);
            pincel.strokeStyle = colour;
            pincel.strokeRect(x0 + incremento, y0, h, l);

            incremento = incremento + 50

        }

    }

    desenhaQuadrado(0, 0, 50, 50, 'red');

</script>
2 respostas
por Leonardo Gouvêa Silva
| 71.1k xp | 42 posts

Opa, olhando de novo, vi que o laço 'for' deve estar dentro da função, por isso estava quebrando. É isso mesmo?

solução!
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Olá, Leonardo!!! Tudo bem contigo?

Tem razão! Neste caso podemos usar dessa maneira que você citou

        function desenhaQuadrado(x0, y0, h, l, colour) {

            for (var contador = 1; contador <= nQuadrados; contador++) {

                pincel.fillStyle = colour;
                pincel.fillRect(x0 + incremento, y0, h, l);
                pincel.strokeStyle = colour;
                pincel.strokeRect(x0 + incremento, y0, h, l);

                incremento = incremento + 50

            }

        }

        desenhaQuadrado(0, 0, 50, 50, 'red');

Como também podemos deixar o for fora da função e chamar o desenhaQuadrado dentro do for

    for (var contador = 1; contador <= nQuadrados; contador++) {

        function desenhaQuadrado(x0, y0, h, l, colour) {

            pincel.fillStyle = colour;
            pincel.fillRect(x0 + incremento, y0, h, l);
            pincel.strokeStyle = colour;
            pincel.strokeRect(x0 + incremento, y0, h, l);

            incremento = incremento + 50

        }
        desenhaQuadrado(0, 0, 50, 50, 'red');
    }

Dessas duas formas você terá o mesmo resultado!

Pode ser que, dependendo de como um projeto se desenrolasse, seria melhor uma ou outra.

Espero ter ajudado, Leonardo!!!

Bons estudos!!!