Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Oi Josemar,
Você consegue postar sua solução para gente analisar melhor?
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.querySelector("#tela");
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 * Math.PI);
pincel.fill();
}
function limpaTela(){
pincel.clearRect(0, 0, 600, 400);
}
var x1 = 20;
var x2 = 600;
function vaiEVolta(){
if(x1 < 600){
atualizaTela();
}
else if(x2 > 20){
atualizaTelaVoltando();
}
}
function atualizaTela(){
limpaTela();
desenhaCirculo(x1, 20, 10);
x1++;
}
function atualizaTelaVoltando(){
limpaTela();
desenhaCirculo(x2, 20, 10);
x2--;
}
setInterval(vaiEVolta, 10);
</script>De certa forma, seu código já está dentro de um loop (por conta do setInterval). Precisamos encontrar outra estratégia para resolver o problema.
Experimente utilizar apenas uma variável para a posição e outra variável para guardar o sentido que a bolinha está andando. Dependendo do sentido, você incrementa ou decrementa a posição. Não se esqueça de atualizar o sentido quando a bolinha atinge a parede.
Veja o que consegue fazer e me diga se conseguiu!
No exercício tem o gabarito, mas quebre mais um pouco a cabeça, só mais um pouco.
Oi Josemar, foi? Precisa de ajuda ?
Uma forma de conseguir este efeito seria fazendo a seguinte alteração:
function vaiEVolta(){
if(x1 < 600){
atualizaTela();
}
else if(x2 > 20){
atualizaTelaVoltando();
}
if (x2==20){
x1 = 20;
x2 = 600;
}
}