Boa noite!
Consegui solucionar o exercício, mas, de uma meio bizarra kkkkk . Gostaria de um feedback, por favor, sobre a questão da lógica. Olhando o código do instrutor, eu pensei: Sério que era só isso? rs
Mesmo não conseguindo chegar numa lógica mais rápida, com um código limpo e objetivo, será que a lógica está entrando na minha cabeça? rs
Segue código desenvolvido:
<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 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
var velocidade = 5;
var andaParaEsquerda;
var andaParaDireita = setInterval(atualizaTela, velocidade);
function atualizaTela() {
limpaTela();
desenhaCirculo(x, 20, 10);
x++;
var stop = x === 600;
if ( stop ){
clearInterval(andaParaDireita);
andaParaEsquerda = setInterval(atualizaTela2, velocidade);
console.log('x', x);
}
}
function atualizaTela2() {
limpaTela();
desenhaCirculo(x, 20, 10);
x--;
var stop = x === 20;
if ( stop ){
clearInterval(andaParaEsquerda);
andaParaDireita = setInterval(atualizaTela, velocidade);
console.log('x', x);
}
}
</script>
Código do instrutor:
<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 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
var sentido = 1;
function atualizaTela() {
limpaTela();
if( x > 600) {
sentido = -1;
} else if (x < 0) {
sentido = 1;
}
desenhaCirculo(x, 20, 10);
x = x + sentido;
}
setInterval(atualizaTela, 10);
</script>
Obrigada =)