O funcionamento do while e do for. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Gabriel da Cunha Cruz Meireles

| 25k xp | 4 posts

Olá a todos!

var x = 0;
    while (x < 600) {

        desenhaQuadrado(x, 0, 'green');
        x += 50;
    }

Esse trecho da aula me deixou em dúvida. Se fosse uma tarefa minha preencher toda a linha com quadrados verdes, eu teria usado o ' <= ' (menor ou igual) em vez de só ' < " (menor) porque, no meu entender, sem o sinal de igualdade o while pararia no 550, já que 600 não é menor do que 600, mas são números iguais na verdade. OBS: na aula, a largura do canvas é de 600px.

E a mesma dúvida cabe no exemplo do for:

for(var x = 0; x < 600; x += 50) {

        desenhaQuadrado(x, 0, 'green');
    }

Como é que de fato funcionam? O sinal de igualdade é inútil nesses casos?

2 respostas

solução!

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

08/06/2018

Boa tarde, Gabriel! Como vai?

Nesse caso, não poderia utilizar o = pq aí o último quadrado iria ser construído a partir do ponto x = 600 e terminaria em x = 650, uma vez que o quadrado tem 50 de lado. Mas vc precisa lembrar que a canvas só tem 600 de tamanho. Dessa forma esse seu último quadrado ficaria pra fora da canvas.

Portanto, o correto é o último quadrado começar em x = 550 e terminar em x = 600 que é justamente o final da canvas.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos!

por Rafael dos Santos Pedro

| 145.8k xp | 5 posts

09/06/2018

Boa noite, pessoal!

Fiz uma tentativa de deixar mais clara a lógica usada para este exercício, a exemplo do que o professor Flavio faz em suas aulas. Espero que ajude o Gabriel. Espero o feedback de vocês, obrigado!

// Declarando variáveis
var larguraTela = tela.width; // Largura do Canvas
var larguraQuadrado = 50;

 // Achando quantos quadrados cabem dentro do Canvas
var qtdQuadrados = larguraTela / larguraQuadrado;

 // Arredondando pra menos
qtdQuadrados = Math.floor(qtdQuadrados);

 // Aplicando à repetição
for(var i = 0;  i < qtdQuadrados;  i++) {

    // Achando a posição no eixo X
    var posX = i * larguraQuadrado;
    desenhaQuadrado(posX, 0, 'green');
}