Não é uma dúvida, só gostaria de mostra o jeito que fiz. Eu fiz o código e a bolinha muda de cor e anda no eixo y. Mas eu achei o código meio bagunçado, coloquei vários if, porém ele funciona bem.
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
var sentido = 1;
var cor = 'blue';
var raio = 10;
var incremento = 1;
var y = 20;
var incrementoY = 1;
function atualizaTela() {
limpaTela();
if(x > 600){
sentido = -1;
cor = 'blue';
}
if(x < 0){
sentido = 1;
cor = 'red';
}
if(y > 100){
incrementoY = -1;
}
if(y < 20){
incrementoY = 1;
}
desenhaCirculo(x, y, raio, cor);
x = x + sentido
raio = raio + incremento;
y = y + incrementoY;
if (raio > 30){
incremento = -1;
}
if (raio <10){
incremento = 1;
}
}
setInterval(atualizaTela, 40);
</script>