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

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>moving</title>
  </head>

  <body>
    <style>
      body {
        margin: 0;
        background-color: dimgray;
      }

      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        align-content: center;
        height: 100vh;
      }

      #canvas-1 {
        position: relative;
        width: 600px;
        height: 400px;
        border: 2px solid gray;
      }

      .item {
        text-align: center;
      }

      h1 {
        font-size: 2.5vw;
        font-weight: 900;
        margin: 10px;
        color: black;
      }

      p {
        font-size: 1.7vw;
        margin: 20px;
        color: black;
      }
    </style>
  </body>

  <div class="container">
    <div class="item">
      <h1 style="font-family: 'Courier New', Courier, monospace"></h1>
      <p style="font-family: monospace">
        vamos, click secundario, no seas cobarde.
      </p>
    </div>
    <canvas id="canvas-1" width="600" height="400"> </canvas>
  </div>

  <!-- ---------------------*************************------------------------------------- -->

  <script>
    // VARIABLES --------------------------------------->
    var screen = document.querySelector("canvas");
    var brush = screen.getContext("2d");
    brush.fillStyle = "dimgray";
    brush.fillRect(0, 0, 600, 400);
    var colorArray = ["cyan", "lightseagreen", "teal"];
    var startColorIndex = 0;

    // FUNCIONES ------------------------------------------->
    function createCircle(x, y, radio) {
      brush.fillStyle = colorArray[startColorIndex];
      brush.beginPath();
      brush.arc(x, y, radio, 0, Math.PI * 2);
      brush.fill();
    }

    function clearCanvas() {
      brush.clearRect(0, 0, 600, 400);
    }

    // VARIABLES --------------------->
    var x = 300;
    var y = -50;
    var radio = 10;
    var drop = true;
    var value = 0;
    var bottom = 397;

    // FUNCIÓN ANIMACIÓN --------------------->
    function repeatCanvas() {
      if (drop == true && y <= bottom) {
        clearCanvas();
        createCircle(x, y, radio);
        y++;
        {
        }
        brush.fillStyle = colorArray[startColorIndex];
        console.log(y);

        if (y == bottom) {
          // drop = false;
          console.log(drop);
          clearCanvas();
          createCircle(x, y, radio);
          y--;
          radio++;
          console.log(y);
        }
      }
    }

    screen.oncontextmenu = colorCycle;

    function colorCycle() {
      startColorIndex++;
      // LOOP PARA CAMBIAR POR CLICK DESDE LA SECUENCIA 'COLORARRAY'
      if (startColorIndex >= colorArray.length) {
        startColorIndex = 0;
      }
      return false; /* EVITAR MENU CONTEXTUAL, EL CLASICO CLICK SENCUDARIO */
    }

    setInterval(repeatCanvas, 4); //aplicar función 'UPDATE CANVAS' y velocidad en 'ms'.
  </script>
</html>