A bolinha ficou pistola, ela vai e voltar, mas acelera cada vez mais. Alguém sabe o que aconteceu?
<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 * 3.14);
pincel.fill();
}
function limpaTela(){
pincel.clearRect(0, 0, 600, 400);
}
var x = 20
var y = 20
var contador = 600
function atualizaTelaIndo(){
contador = 600
if(x == contador){
setInterval(atualizaTelaVoltando, 10)
}else{
limpaTela();
desenhaCirculo(x, y, 10);
x++
}
}
function atualizaTelaVoltando(){
if(x < 20){
setInterval(atualizaTelaIndo, 10)
}
limpaTela();
desenhaCirculo(x, y, 10);
contador--
x = x - 2
}
setInterval(atualizaTelaIndo, 10)
</script>