Fiz este exercício junto com o desafio da "bolinha pulsante" e decidi adicionar uma troca de cores a cada vez que a bolinha pulsa :)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bolinha Pulsante</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var screen = document.querySelector("canvas");
var brush = screen.getContext("2d");
var colors = ["blue", "red", "yellow", "green", "pink", "black", "purple", "orange", "white"];
var currentColor = 0;
var radiusSize = 0;
var radius = 19;
var x = 20;
var y = 20;
//códigos do teclado
var left = 37;
var up = 38;
var right = 39;
var down = 40;
function drawCircle(x, y, radius, color) {
brush.fillStyle = color;
brush.beginPath();
brush.arc(x, y, radius, 0, 2 * Math.PI);
brush.fill()
}
function reloadPage() {
brush.clearRect(0, 0, 600, 400);
brush.fillStyle = "lightgray";
brush.fillRect(0, 0, 600, 400);
if (radius > 30) {
radiusSize--;
} else if (radius < 20) {
radiusSize++;
}
drawCircle(x, y, radius, colors[currentColor]);
radius = radius + radiusSize;
}
function changeColors() {
currentColor++;
if (currentColor >= colors.length) {
currentColor = 0;
}
}
function keyboard(event) {
if (event.keyCode == right) {
x = x + 10;
} else if (event.keyCode == left) {
x = x - 10;
} else if (event.keyCode == up) {
y = y - 10;
} else if (event.keyCode == down) {
y = y + 10;
}
}
document.onkeydown = keyboard;
setInterval(reloadPage, 20);
setInterval(changeColors, 550);
</script>
</body>
</html>