Experimento fallido | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Hola, sólo estaba jugando un poco y se me ocurrió intentar crear 4 líneas de diferentes círculos corriendo uno más lento que el anterior. Pero no funcionó

¿Alguien me puede explicar por qué?

<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);
        pincel.fill();
    }

    function limpiarPantalla(){
        pincel.clearRect(0,0,600,400);
    }

    var x = 0
    var y = [20,30,40,50];
    function actualizarPantalla(y){
        limpiarPantalla();
        disenharCircunferencia(x,y,10);
        x++
    }

    setInterval(actualizarPantalla(y[0]),5);
    setInterval(actualizarPantalla(y[1]),10);
    setInterval(actualizarPantalla(y[2]),20);
    setInterval(actualizarPantalla(y[3]),25);




</script>

Hola Estudante,

Gracias por compartir tu código con nosotros. Parece que el problema está en la función actualizarPantalla. En esta función, estás utilizando la variable x para mover el círculo horizontalmente, pero no estás utilizando la variable y para moverlo verticalmente. Además, estás pasando y[0], y[1], y[2] y y[3] como argumentos a la función setInterval, pero esto no funcionará como esperas.

Para solucionar este problema, puedes modificar la función actualizarPantalla para que tome un índice como argumento y utilice ese índice para obtener la posición vertical del círculo desde el arreglo y. Además, puedes utilizar la función setInterval de la siguiente manera:

setInterval(function() { actualizarPantalla(0); }, 5);
setInterval(function() { actualizarPantalla(1); }, 10);
setInterval(function() { actualizarPantalla(2); }, 20);
setInterval(function() { actualizarPantalla(3); }, 25);

De esta manera, cada llamada a setInterval creará una función anónima que llamará a actualizarPantalla con el índice correspondiente.

Aquí está el código modificado:

<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);
    pincel.fill();
  }

  function limpiarPantalla() {
    pincel.clearRect(0, 0, 600, 400);
  }

  var x = 0;
  var y = [20, 30, 40, 50];

  function actualizarPantalla(indice) {
    limpiarPantalla();
    disenharCircunferencia(x, y[indice], 10);
    x++;
  }

  setInterval(function() { actualizarPantalla(0); }, 5);
  setInterval(function() { actualizarPantalla(1); }, 10);
  setInterval(function() { actualizarPantalla(2); }, 20);
  setInterval(function() { actualizarPantalla(3); }, 25);
</script>

Espero que esto te ayude a resolver tu problema. ¡Buenos estudios!

Un saludo.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios