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>
``````