Hola, esta es la manera que a mí se me hizo más fácil para resolver el ejercicio que nos plantea el desafío de hacer que la bola vaya y vuelta a traves de la pantalla. Pueden apoyar dejando su retroalimentación, o sugerencias para hacerlo más práctico.
<canvas width="600" height="400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey"; // background
pincel.fillRect(0,0,600,400);
function dibujarCirculo(x, y, radio, color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2*Math.PI);
pincel.fill();
}
function limpiarpantalla() {
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
}
function animarFigura() {
limpiarpantalla();
dibujarCirculo(x, 30, 10, "skyblue");
if (accion == "incrementar") {
x++;
if (x >= 599) {
accion = "decrementar";
}
}
else {
x--;
if (x <= 1) {
accion = "incrementar";
}
}
}
var x = 0;
var accion = "incrementar";
setInterval(animarFigura, 10);
</script>