Buenas gente. Hice el ejercicio. Me costó bastante esta vez. Aquí les dejo mi versión del ejercicio, por alguna razón luego de un par de vueltas correctamente, la bolita va mucho mas lento o con lag. Quisiera saber si alguien me puede ayudar con esto y optimizarlo. Aclaración 1: El ejercicio funciona y hace lo que se pidió en la consigna. Aclaración 2: He definido que cada vez que se vuelve a imprimir la bolita, se mueva de a 20 y no x++ o x--. Aclaracion 3: Hice que la bolita se mueva super super rápido (Quisiera que alguien me confirme si la razon del lag es por eso). Aclaración 4: Este comentario del foro, y lo que voy a mostrar, es anterior a ver la resolución del profesor. Pero igual quisiera recibir ayuda por esto.
<script>//Vamos a crear un circulo en movimiento y que vuelva.
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "grey";
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);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
var x=0;
var posicionIzq=true;
function actualizarPantalla(){
limpiarPantalla();
disenharCircunferencia(x,20,10);
if(x==0){
posicionIzq=true;
}
if(posicionIzq==true){
x=x+20;
}else{
x=x-20;
}
if(x==600){
posicionIzq=false;
}
console.log(x);
}
setInterval(actualizarPantalla,10);
</script>