Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Como o 601 se transforma em -1?

No código abaixo, quando o x recebe 601 o if é executado, e sentido recebe -1. Mas lá em baixo, na linha x = x + sentido, o x atual (601) é somado com sentido, que agora vale -1?

Então fica 601 + - 1? Não estou entendendo essa parte :/

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    var x = 20;

    var sentido = 1;

    function atualizaTela() {

        limpaTela();

        if( x > 600) {
            sentido = -1
        } else if (x < 0) {
            sentido = 1;
        } 

        desenhaCirculo(x, 20, 10);
        x = x + sentido;
    }

    setInterval(atualizaTela, 10);

</script>
5 respostas

Sim, x é somado com -1. A ideia é fazer a bolinha ficar andando de um lado para o outro no eixo x do seu canvas. Assim, cada vez que atualiza a tela, ele deve incrementar ou decrementar o x. Quando ele entra no if(x>600), significa que a bolinha chegou no extremo do seu canvas e precisa voltar, por isso você começa a decrementar o x somando ele a variável sentido (que vale -1).

Obrigado por responder, Júlia.

Mas ainda não consegui entender...

Quando x recebe 601, o círculo é desenhado na coordenada 601 e x passa a valer 601 + -1?

Não estou entendendo como o x passa a valer -1, e não 600... Até testei no console esses valores (print abaixo).

tudo-que-vai-volta.jpg

Entendi. O que está acontecendo é que quem passa a valer -1 é a variável sentido, não o x. Você está certo em pensar que o x passa a valer 600 porque é exatamente isso que acontece. Ele vai incrementando até 600 (sentido = 1 vai sendo somado no valor de x) e quando x passa de 600, sentido passa a valer -1 para ir diminuindo o valor de x até zero (quando entra no segundo if e inverte o sentido novamente). Entendeu?

solução!

A variavel x tem o valor de 20 certo e a variavel sentido tem o valor de 1. Com esses valores voce entra no

 if( x > 600)

ou seja 20 é maior que 600? não então ele vai para

 else if (x < 0)

20 é menor que 0? também não então ele sai dai e vai para

desenhaCirculo(x, 20, 10);
        x = x + sentido;

ele desenha o circulo e depois incrementa o valor de x

20 = 20 + 1;

agora o x vale 21 e ele retorna la para o primeiro if agora com o valor de 21, ele vai repetir isso até o valor dele ser 601 certo?

E ai ele vai perguntar de novo 601 é maior que 600? sim então agora o valor da variavel sentido passa a ser -1.

Ele continua para o else if, 601 é menor que 0? não então ele sai e desenha o circulo e faz o calculo

601 = 601 + -1

que da o valor de 600, agora você entra no primeiro if com o valor de x valendo 600 e o valor da variavel sentido sendo -1.

600 é > 600? não então ele vai para o proximo, 600 é < 0? também não então ele sai e desenha o circulo e faz de novo o calculo

600 = 600 + - 1

que resulta em 599, conseguiu entender como ele ta funcionando? Agora ele a bolinha esta voltando? diminuindo o valor de x (do eixo x) até que ele passe a ter o valor de -1 faça o caminho agora o valor de x sendo -1 e vai entender exatamente o que esta acontecendo.

Desculpa se ficou longa a resposta e espero que tenha ajudado. Qualquer coisa retorne a perguntar todos estamos aqui para ajudar.

Finalmente entendi!!!

Abaixo vcs podem conferir como ficou minha cara .

Muito obrigado, Júlia e Mauro.

loucura-02.jpg

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software