Hola Alura Team, pues después de darle bastantes vueltas, tratando de solucionar el problema con lopp, usando while, y funciones anidadas, y condicionantes, lo ás cerca que estoy de resolver este ejercicio es lo siguiento: Logro que la bola corra de izquierda a derecha, declaranddo la variable x =0 y condicionando dentro de la función x<= 600, y sumando uno a x, y corre. Sin embargo para regresarla, después del if, en el else, pongo que a x le quito uno, es ahí cuando la bola llegó a 600, se regresa, un pixel, pero al caer dentro de la primera condición declarada en el if, me la regresa al final, y así se la pasa rebotando un pixel adelante y uno atrás. Siento que algo me falta para interrumpir la primera condición del if, y permitir que la bola regrese de uno en uno. hasta utilicé break dentro del while, pero no pude. Alguna sugerencia?? gracias.!!!!
<canvas width="600" height="400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
function disenharCircunferencia(x,y, radio){
pincel.fillStyle = "blue";
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2 * Math.PI); //el ángulo inicial y final están en radianes
pincel.fill(); //rellename la circunferencia
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
var x = 0
function actualizarPantalla(){
if (x<=600){
limpiarPantalla();
disenharCircunferencia(x,20,10);
x++;
}
else {
limpiarPantalla();
disenharCircunferencia(x,20,10);
x = x - 1;
}
}
setInterval(actualizarPantalla,100);
</script>
