<canvas width="500" height="500"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = '#85FDAB';
pincel.fillRect(0, 0, 500, 500);
function desenharCirculo(x, y, cor, raio) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2*Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.fillStyle = '#85FDAB';
pincel.fillRect(0, 0, 500, 500);
}
function andarParaDireita() {
limpaTela();
desenharCirculo(x, y, cor, raio);
x++;
if(x==500-raio) {
cor = corAleatoria();
direcao = 'esquerda';
}
}
function andarParaEsquerda() {
limpaTela();
desenharCirculo(x, y, cor, raio);
x--;
if(x==raio) {
cor = corAleatoria();
direcao = 'direita';
}
}
function moverCirculo() {
if(direcao == 'direita') {
andarParaDireita();
}
if(direcao == 'esquerda') {
andarParaEsquerda();
}
}
function corAleatoria() {
return cores[Math.round(Math.random()*5)];
}
var cores = ['blue', 'red', 'purple', 'green', 'yellow', 'orange'];
var x = 30;
var y = 30;
var cor = corAleatoria();
raio = 20;
var direcao = 'direita';
var atualizacaoFrame = setInterval(moverCirculo, 5);
</script>