<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 y = 20;
var raio = 10;
function atualizaTela(){
if(x + raio < 600){
limpaTela();
desenhaCirculo(x, y, raio);
x++;
}
if(x + raio > 600){
limpaTela();
desenhaCirculo(x, y, raio);
x = x - 1;
}
}
setInterval(atualizaTela, 10);
</script>
3
respostas
respostas
Porque meu código não está funcionando?
Parece que está correto. Abra no Chrome e tecle f12, abra o console e veja se exibe alguma mensagem de erro.
Não existe nenhuma mensagem de erro, porém quando a bolinha chega na extremidade direita ela nao volta, ela para.
Uma solução seria criar uma variável global para validar a direção da bolinha. Atribui inicialmente zero para ela, e dentro da função atualizaTela(), você faz um if para verificar se x + raio é igual a 600 e outro if para verificar se x - raio é igual a 0. Se for igual a 600, atribui 1 para a variável global (para mudar a direção para a esquerda) e se for 0, você atribui 0 novamente para a variável (para a direção ser para a direita).
E na primeira condição que vc já implementou dentro da função, ao invés de < 600 troque para <= 600 e acrescente && [nome da variável global] == 0 , isso para continuar incrementando o x. Já na segunda condição, ao invés de > 600, mude para <= 600 (pq o objetivo é verificar a posição x dentro do canvas, se for > 600 ele estará fora do canvas, então não faz sentido) e acrescente && [nome da variável global] == 1, para decrementar o x.