Alternativa - Ida e Volta Bolinha

Olá, Leonardo! Tudo bem contigo?

Ao abrir o console do navegador (F12), vemos um probleminha: não está reconhecendo a variável x

ReferenceError: x is not defined

Significa que essa variável não existe quando você chama o atualizaTela, pois ela está dentro das funções, e dentro das funções só existem para elas e para mais ninguém.

Se alterarmos o x para 10

    function atualizaTela () {

            pintaFundo();
            desenhaCirculo(10, 150, 10);

        }

A bolinha aparecerá, mas ainda não executa, porém já é um bom treino para descobrir como caminhar ;-)

E se colocarmos essa variável fora das funções?

Veja se consegue e nos retorne, Leonardo!

Ficamos no aguardo!

Olá Cassio! Eu coloquei a variável x pra fora das funções, e realmente agora a bolinha aparece, mas continua parada. Sei que na solução do exercício ele dá uma solução diferente, e até mais simples, mas queria realmente testar se posso usar o 'FOR' para resolver isso. No código que fiz, tem dois Fors, um para acrescer o x de 1 em 1, e repetindo o desenho da bolinha até 600, e outro pra descrescer. Já revisei o código n vezes e não consegui encontrar o motivo da bolinha continuar parada :(

Segue como está o código:

<meta charset="UTF-8">

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

<script>

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

    function pintaFundo() {

        pincel.fillStyle = 'lightgrey';
        pincel.fillRect(0, 0, 600, 400);

    }

    function desenhaCirculo(x, y, raio) {

        for(var x = 10; x < 600; x++) {

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

        }

        for(var x = 599; x > 10; x = x - 1){

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

        }

    }

    function limpaTela() {

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

    }

    function atualizaTela () {

            pintaFundo();
            desenhaCirculo(x, 150, 10);

        }


    setInterval(atualizaTela, 20);

</script>

Olá Leonardo, tudo bem com você?

Essa questão do canvas por mais que pareça caber um loop, acaba sendo impossível por algumas razões:

1 - O setInterval a cada 10 milissegundos cria uma nova instância do loop o que deixa completamente pesado o navegador

2 - A velocidade de fazer um while de 1 até 600 é impossível perceber na tela, vou te dar um exemplo:

    var contador = 1;
    while(contador < 100){
        for( var i = 0; i <= 600; i++ ){
            limpaTela();
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, 30,10, 0, 2 * Math.PI);
            pincel.fill();
            x++;
        }

        console.log(x);

        for( var i = 600; i >= 0; i-- ){
            limpaTela();
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, 30,10, 0, 2 * Math.PI);
            pincel.fill();
            x--;
        }
        console.log(x);
        console.log(contador);

        contador++;
    }

Esse código copia o que você tentou fazer, a única coisa que eu troquei foi ao invés do setInterval optei por um while de 1 até 100, se você abrir o console do navegador, vai ver que realmente o programa está executando as 100 vezes, entretanto é impossível observar ver a bolinha se movimentar pois é extremamente rápido, caso queira ter certeza de que ela está se movimentando você pode jogar esse código no console:

        for( var i = 0; i <= 300; i++ ){
            limpaTela();
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, 30,10, 0, 2 * Math.PI);
            pincel.fill();
            x++;
        }

E vai ver que a bolinha foi parar na metade da tela, entretanto pareceu instantâneo, de tão rápido que é feito o processamento :)

Por isso precisamos utilizar o setInterval da mesma maneira que o professor utilizou, dessa maneira garantimos que a frequência de atualização seja visível, e aumentando de 1 em 1 sem o loop :)

Abraços e Bons Estudos!