[Proyecto] Rebote (con IF ELSE: otro método)

En caso de tener alguna duda comunicarse al LinkedIn haciendo click aquí

<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 = "gold";
      pincel.beginPath();
      pincel.arc(x, y, radio, 0, 2 * Math.PI);
      pincel.fill();

      pincel.beginPath();
      pincel.arc(x - 10, y + 28, radio * 2, 0, 2 * Math.PI);
      pincel.fill();

      pincel.beginPath();
      pincel.moveTo(x + 9, y);
      pincel.lineTo(x + 7, y + 8);
      pincel.lineTo(x + 15, y + 8);
      pincel.fill();

      pincel.beginPath();
      pincel.moveTo(x - 30, y + 35);
      pincel.lineTo(x - 25, y + 40);
      pincel.lineTo(x - 40, y + 40);
      pincel.fill();


      pincel.fillStyle = "white";
      pincel.beginPath();
      pincel.arc(x - 3, y - 3, radio / 4, 0, 2 * Math.PI);
      pincel.fill();

   }

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

   var x = 40;
   var y = 580;
   function actualizarPantalla() {

      if (x < 580) {
         limpiarPantalla();
         disenharCircunferencia(x, 20, 10);
         x++;
      } else if (y >= 40) {
         limpiarPantalla();
         disenharCircunferencia(y, 20, 10);
         y--;
      } if (y == 40 && x == 580) {
         x = 40;
         y = 580;
      }
   }

   setInterval(actualizarPantalla, 10);

</script>