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!
Olá, Segue alguns comentários sobre o código. No seu código ele nunca está executando as funções bolinhaVoltando(); e bolinhaIndo(); pois no if e else que colocou, ele só vai executar um caso o valor de X seja maior que 600 e o outro caso o valor de X seja menor que 20. Como você inicializou a variável x como x = 20; sua função nunca vai rodar. Mesmo se você inicializar a variável menor que 20, por exemplo x = 0; a sua bolinha só irá se movimentar para a direita (bolinhaIndo();) até x = 20;, já que na condições que foi colocada no código, não tem execução do movimento da bolinha no intervalo de x >= 20 && x <= 600.
var x = 20;if (x > 600) {
bolinhaVoltando()
} else if ( x < 20 ) {
bolinhaIndo();
}Acrescentando, no código, a chamada da função bolinhaVoltando() está faltando o ponto e virgula no final ( ; ). Apesar de funcionar sem, seria bom já incluir.
Mantive exatamente o seu código e fiz um pequeno ajuste, para o mesmo funcionar. Adicionei uma variável do sentido, inicializando como 1
var sentido = 1; //Sentido da esquerda para a direita. ->Abaixo a função atualizaTela() ajustado:
function atualizaTela() {
if (x > 600) { //Se a posição horizontal da bolinha for maior que 600
sentido = -1; //Sentido da direita para a esquerda <-
} else if ( x <= 0 ) { //Se a posição horizontal da bolinha for menor ou igual a 0
sentido = 1; //Sentido da esquerda para a direita ->
}
if (sentido == -1){
bolinhaVoltando(); //Bolinha anda da direita para a esquerda
}
else if (sentido == 1){
bolinhaIndo(); //Bolinha anda da esquerda para a direita
}
}Segue o código completo ajustado:
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'white';
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 bolinhaIndo() {
limpaTela();
desenhaCirculo(x, 20, 10);
x++;
}
function bolinhaVoltando(){
limpaTela();
desenhaCirculo(x, 20, 10);
x = x - 1;
}
function atualizaTela() {
if (x > 600) {
sentido = -1;
} else if ( x <= 0 ) {
sentido = 1;
}
if (sentido == -1){
bolinhaVoltando();
}
else if (sentido == 1){
bolinhaIndo();
}
}
setInterval(atualizaTela, 20);
</script>Deu certo?