Dúvida Aula 4 Atividade 6, Bolinha vai e volta.

Oi Davilson tudo bem?

Veja como eu fiz

<meta charset="utf-8">

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

<script>

    /* Vai e volta!

     */

    var monitor = document.querySelector('canvas');
    var objeto = monitor.getContext('2d');

    objeto.fillStyle = 'lightgray';
    objeto.fillRect(0, 0, 600, 400);

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

    x = 20;
    function animaBolinha() {

        objeto.clearRect(0, 0, 600, 400);
        bolinha(x, 20, 10);
        x = x + 5;
        if (x > monitor.width) {
            x = 20;
        }
        console.log(x);
        return x;
    }



    setInterval(animaBolinha, 30);


</script>

O console.log não escrevia o x porque ele estava fora da função animaBolinha e ele já tinha passado por ela na execução do código. Resolvi colocando ele dentro e colocando um if para quando a bolinha ultrapassar o canvas.

Espero ter ajudado!!!

Oi André, tudo certo ?

Sim! funciona, até me apresentou um novo elemento, o .width. Legal pode usar esse método no lugar de digitar os valores do canvas. Valew!

Mas desculpe, vou insistir no retorno da função um pouco....rs! Fique desgraçado da cabeça porque não consegui retornar um elemento de dentro da função. Achei que sabia fazer isso, o instrutor tinha passado no curso 1 o retorno de dentro da função.

Mas nesta, não consigo extrair um valor lá de dentro. no console, ele diz que não achou a variável //Can't find variable: test. vou colocar um teste aqui de novo, e mais abaixo um exemplo de return do curso 1.

<meta charset="utf-8">

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

<script>

/* Vai e volta!

 */

var monitor = document.querySelector('canvas');
var objeto = monitor.getContext('2d');

objeto.fillStyle = 'lightgray';
objeto.fillRect(0, 0 ,600 ,400 );

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

var x = 20;

function animaBolinha()  {
    var test = true; // valor a ser retornado

    objeto.clearRect(0, 0, 600, 400);
    bolinha(x, 20, 10);
    x = x + 5;
    if (x > monitor.width) {
        x = 20;
    }

    return test; //  valor não retorna. 
}

setInterval(animaBolinha, 30);

var testando = test;
console.log(testando);

</script>

Exemplo de return do curso 1.

<meta charset="utf-8">

<script>
    function pulaLinha() {
        document.write("<br>")
    }

    function mostra(frase) {
        document.write(frase);                    
        pulaLinha();
    }

 function calculaImc(peso, altura) {

        var soma = (altura + altura);
        return soma
 }

 var soma = calculaImc (10, 10);
 console.log(soma);
 mostra(soma);



</script>

Eu entendi agora a sua dúvida. Dá uma olhada sobre esse artigo sobre escopo de função https://medium.com/weyes/entendendo-o-uso-de-escopo-no-javascript-3669172ca5ba . Ele exemplifica bem isso.

Opá André, obrigado!

Vou cair no link do artigo pra eu entender melhor.

Só pra explicar o que tinha pensado. Eu tentei criar uma booleana com a linha setInterval. ai lá dentro da função de acordo com as condicões do if else, uma variável retornava false ou true.

// código acima

test = true ou false

if (test) {
    setInterval(animaBolinha, 20);
}

Disponha e bons estudos!!!