Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

¡Ya que va, que vuelva!

Lo resolví de la siguiente forma :

<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);
  }

  let x = 0;
  function bolaVa() {
    if (x < 600) {
      limpiarPantalla();
      disenharCircunferencia(x, 20, 10);
      x++;
    } else if (x === 600) {
      bolaVuelve();
    }
  }
  let i = 600;
  function bolaVuelve() {
    if (i > 0) {
      limpiarPantalla();
      disenharCircunferencia(i, 20, 10);
      i--;
    } else if (i === 0) {
      i = 600;
      x = 0;
      bolaVa();
    }
  }

  setInterval(bolaVa, 10);
</script>
1 respuesta

Hola Diana, espero que estés bien! Gracias por compartir tu código con nosotros. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos! :)

Si este post te ayudó, por favor, marca como solucionado ✓.

.