1
resposta

[Projeto] Fiz o projeto dessa forma, também obtive o mesmo resultado.

<meta charset="UTF-8">
<canvas width="700" height="500"></canvas>

<script>

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


    function desenhaQuadrados(x,cor) { 

    pincel.fillStyle = cor;
    pincel.fillRect(x,50, 100,100);
    pincel.strokeRect(x,50, 100,100);
    pincel.strokeRect(x+100,50, 100,100);

    }

    function desenhaTexto(texto,x,y,cor){

        pincel.font = '20px Georgia';
        pincel.fillStyle = cor;
        pincel.fillText(texto,x,y);

    }   

    pincel.fillStyle = 'white';
    pincel.fillRect(0,0, 700,500);

    for(var x = 50; x <= 250; x = x + 100){

        desenhaQuadrados(x,'green');

    }

    desenhaTexto("Qual é a fração ?",50, 30, 'black');


    </script>
1 resposta

Oi Matheus, tudo bem?

Obrigado pela paciência em aguardar uma resposta!

Fico feliz que tenha conseguido, além de implementar os códigos apresentados durante o curso, realizar adaptações, inclusive ótimo uso da propriedade de loop for(). Seu código apresenta boa indentação, clareza e está super organizado. Parabéns pela dedicação!

Caso queira se aprofundar mais em lógica de programação, recomendo que você faça o curso de Javascript e HTML: desenvolva um jogo e pratique lógica de programação, que explora outros jogos que podem ser criados com a linguagem Javascript por meio do uso de editores de código-fonte.

Recomendo que caso se sinta confortável em compartilhar seu conhecimento, interagir com outros estudantes, trocar experiências e fazer networking, participe do Discord oficial da Alura de alunas e alunos:

Caso tenha dúvidas, estarei à disposição para te ajudar!

Grande abraço e bons estudos!