Desenhei a bandeira LGBT, porém tenho uma dúvida sobre como simplificar ainda mais meu código | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

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 Estudante

| 106.4k xp | 76 posts

Olá! Boa noite a Todos! Por curiosidade durante a aula sobre o uso de laços de repetição (while/for) com os comandos dentro da função afim de desenhar os quadrados, resolvi recriar a bandeira LGBT com meu código a seguir:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

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

<script>
function drawSquare(x,y,color){

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

pincel.fillStyle = color;
pincel.fillRect(x, y, 50, 50);
pincel.strokeStyle = 'black';
pincel.strokeRect(x, y, 50, 50);
}
var x = 0;

while(x < 600) {
drawSquare(x,0,'red');
drawSquare(x,50,'orange');
drawSquare(x,100,'yellow');
drawSquare(x,150,'green');
drawSquare(x,200,'blue');
drawSquare(x,250,'purple');
x = x + 50;
}

</script>

Contudo, como podem ver, tive de repetir algumas vezes o comando drawSquare (desenhar quadrado). Como posso simplificar ainda mais meu código, tendo em vista que o eixo Y também está crescendo de forma similar ao eixo X?

2 respostas

por Marcellus Franco Lima

| 37.1k xp | 4 posts

27/01/2022

Oi Ednirli, eu duas funçoes uma para horizontal e outra para vertical, ambas voce escolhe a quantidade de quadrados que voce quer, talvez te de uma ideia.

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

<script>


    var tela = document.querySelector("canvas");
    var p = tela.getContext("2d");

    function fazQuadradosHorizontal(cor, quantidade, x, y) {

        var contador = 1
        var quantidadeInformada = quantidade

        var xInformado = x;

        var yInformado = y;


        while(contador <= quantidadeInformada ) {

            p.fillStyle = cor;
            p.fillRect(xInformado, yInformado, 50, 50);
            p.strokeStyle = "black"
            p.strokeRect(xInformado, yInformado, 50, 50);
            contador++;
            xInformado = xInformado + 50;

        }


    }

    function fazQuadradosVertical(cor, quantidade, x, y) {

        var contador = 1
        var quantidadeInformada = quantidade

        var xInformado = x;

        var yInformado = y;


        while(contador <= quantidadeInformada ) {

            p.fillStyle = cor;
            p.fillRect(xInformado, yInformado, 50, 50);
            p.strokeStyle = "black"
            p.strokeRect(xInformado, yInformado, 50, 50);
            contador++;
            yInformado = yInformado + 50;

        }


    }

    fazQuadradosHorizontal("red", 6, 0, 0,);
    fazQuadradosVertical("green", 2, 0, 50);
    fazQuadradosHorizontal("blue", 4, 50, 50);
    fazQuadradosHorizontal("yellow", 1, 250, 50);
    fazQuadradosHorizontal("yellow", 5, 50, 100);
</script>

por Vitor Hugo Silva Moreira da Paixão

| 105.8k xp | 96 posts

Estudante

29/01/2022

Olá, Ednirli !

Quando você roda o programa eu só visualizo as 3 primeiras linhas da bandeira. Pra vc também tá assim?