martes, 9 de enero de 2024

Otro html

TOCA CON EL DEDO Y DISPARAS BOLAS AZULES




<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Animación de círculos</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

      // Dibuja un cuadrado en el canvas
      ctx.fillStyle = 'red';
      ctx.fillRect(50, 50, 100, 100);

      // Agrega un evento touchstart al canvas
      canvas.addEventListener('touchstart', function(event) {
        // Dibuja círculos en el canvas y los mueve hacia el eje -y-
        let y = 50;
        let radius = 10;
        let intervalId = setInterval(function() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.fillStyle = 'red';
          ctx.fillRect(50, 50, 100, 100);
          ctx.fillStyle = 'blue';
          ctx.beginPath();
          ctx.arc(100, y, radius, 0, 2 * Math.PI);
          ctx.fill();
          y += 10;
          if (y > canvas.height + radius) {
            clearInterval(intervalId);
          }
        }, 50);
      });
    </script>
  </body>
</html>

Animación de círculos

No hay comentarios:

Publicar un comentario