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>
