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

por que minha bolinha não volta?

Oi, fiz o código dessa maneira, mas o x continua sendo printado no console indefinidamente. Achei a lógica boa, mas talvez a linguagem se comporte de maneira diferente. Gostaria de saber por que a bolinha não volta

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

<script>

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

pincel.fillStyle = "white";
pincel.fillRect(0, 0, 600, 400);

function desenhaCirculo(y, raio){

    pincel.fillStyle = "red";
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*Math.PI);
    pincel.fill();
    console.log(x + "," + y);
}

function limpaTela(){
    pincel.clearRect(0, 0, 600, 400);
}

var x = 20;

function desenhaida(){

    limpaTela();
    desenhaCirculo(50, 10);
    x++;
}

function desenhavolta(){

    limpaTela();
    desenhaCirculo(50, 10);
    x = x-1;
}

var anima = 0;

if(x >= 600){
    anima = -1;
    console.log("abacate");
}
if(x <= 20){
    console.log("abacaxi");
    anima = 1;
}



if(anima == 1){
    setInterval(desenhaida, 10);
}
if (anima == -1){
    setInterval(desenhavolta, 10);
}


</script>

``````

2 respostas
solução!

A bolinha não volta porque a rotina de "desenhaida" é executada direto, ele não entra nessa parte final onde você compara o valor de x para escolher qual direção executar.

Para resolver isso, tente agrupar a lógica de seleção de direção numa função, e mande executar ela em intervalos de tempo regulares. Segue um exemplo de seu código com esta alteração.

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

<script>

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

pincel.fillStyle = "white";
pincel.fillRect(0, 0, 600, 400);

var x = 20;
var anima = 0;


function desenhaCirculo(y, raio){

    pincel.fillStyle = "red";
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*Math.PI);
    pincel.fill();
    console.log(x + "," + y);
}

function limpaTela(){
    pincel.clearRect(0, 0, 600, 400);
}


function desenhaida(){

    limpaTela();
    desenhaCirculo(50, 10);
    x++;
}

function desenhavolta(){

    limpaTela();
    desenhaCirculo(50, 10);
    x--;
}


function ControlarMovimento(){
    if(x >= 600){
        anima = -1;
        console.log("abacate");
    }
    if(x <= 20){
        console.log("abacaxi");
        anima = 1;
    }

    if(anima == 1){
        desenhaida();
    }
    if (anima == -1){
        desenhavolta();
    }

}

setInterval(ControlarMovimento, 10);
</script>

Muito obrigada Daniel, entendi agora o que acontece. :)