Essa foi mais uma questão de dificuldade matemática da minha parte. Mas como eu faço para saber os pontos das coordenadas? Não consegui chegar à uma solução sozinha. Alguém poderia me ajudar?
Solucionado
Essa foi mais uma questão de dificuldade matemática da minha parte. Mas como eu faço para saber os pontos das coordenadas? Não consegui chegar à uma solução sozinha. Alguém poderia me ajudar?
hoje, com a Alura e o Google Gemini
Olá, Maria Luiza!
O instrutor do curso deixou a resposta e uma ótima explicação no final desta atividade. Basta clicar em "Ver opinião do instrutor" (botão verde).
Se ainda sim tiver dificuldades, poste aqui que tentarei lhe ajudar.
Continue firme em seus estudos!
Mesmo vendo a opinião do instrutor e a solução, segui com dúvidas :( estou com dificuldade de designar as coordenadas
Muito bem, vou tentar lhe explicar de outra maneira.
Acho que o grande segredo deste exercício é analisar com calma qual o tamanho da área (em pixels) que temos para desenhar, e onde começa e termina cada quadrado.
Já que estamos trabalhando em 2d, temos as coordenadas x (que representa largura - horizontal) e y (que representa altura - vertical).
A função fillRect(x, y, width, height) recebe 4 parâmetros: x e y dizem respeito às coordenadas onde queremos começar a desenhar nosso quadrado, enquanto que width e height serão a largura e altura do quadrado que será desenhado.
Se você desenhar o quadrado verde assim:
pincel.fillStyle = 'darkgreen';
pincel.fillRect(0, 0, 350, 300);Você terá um quadrado começando na borda superior esquerda da tela, onde x = 0 e y = 0. Seu quadrado termina em x = 350 e y = 300.
A partir daí, o que precisamos é de matemática e alguma lógica para desenhar os quadrados restantes.
Eu te aconselho a começar pelos quadrados de baixo, que estão encostados na borda inferior do quadrado verde.
Pela instrução que nos foi passada, cada um desses quadrados deve ter 40px de largura e 110px de altura.
Se a altura do nosso do nosso quadrado verde começa em y = 0 e termina em y = 300, nós desenharemos o primeiro quadrado preto da boca do Creep passando o valor y (altura de onde começaremos a desenhar esse quadrado) sendo 350 - 110, que é igual a 240.
pincel.fillStyle = 'black';
pincel.fillRect(20, 240, 40, 110);Observe que eu defini o valor x como 20, apenas para ele não ficar colado na borda esquerda do quadrado verde. Se você mudar esse valor para algo maior que 20, o quadrado preto se movimentará para a direita.
A lógica para desenhar os outros quadrados é exatamente a mesma, fazer essas continhas e ir testando o resultado visual.
A intenção aqui é que você "quebre a cabeça" um pouco e vá experimentando, pois só assim você aprenderá de verdade!
Espero ter ajudado!
Não hesite em perguntar se ainda não entendeu.