`data/artifacts/08d1c975f6db/hermes3-8b.html`

85 lines
<!DOCTYPE html>
<html>
<head>
  <title>20 Bouncing Balls</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
      background-color: #f5gsg;
    }
    slider {
      position: fixed;
      bottom: 10px;
      left: 10px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slider" id="gravitySlider">
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    let gravity = 0.5;
    const balls = [];
    for (let i = 0; i < 20; i++) {
      balls.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 10 + 2,
        speedX: (Math.random() - 0.5) * 4,
        speedY: (Math.random() - 0.5) * 4,
        color: `hsl(${(i*360)/20}, 100%, 50%)`,
        trailLength: Math.random() * 10 + 2
      });
    }

    function drawBalls() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      for (let i = 0; i < balls.length; i++) {
        const ball = balls[i];
        
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = ball.color;
        ctx.fill();
        
        ctx.strokeStyle = `rgba(${ball.color}, ${ball.trailLength})`;
        ctx.lineWidth = ball.radius / 5;
        ctx.moveTo(ball.x - ball.radius, ball.y + ball.radius);
        for (let j = 0; j < ball.trailLength; j++) {
          const x = ball.x - Math.sin(j * Math.PI / ball.trailLength) * ball.radius;
          const y = ball.y - Math.cos(j * Math.PI / ball.trailLength) * ball.radius;
          ctx.lineTo(x, y);
        }
        ctx.stroke();
        
        balls[i].x += ball.speedX;
        balls[i].y += ball.speedY + gravity;

        if (balls[i].x < 0 || balls[i].x > canvas.width - ball.radius)
          balls[i].speedX *= -1;
        if (balls[i].y < 0 || balls[i].y > canvas.height - ball.radius)
          balls[i].speedY *= -1;
      }
    }

    function updateGravity(newGravity) {
      gravity = newGravity;
    }

    setInterval(drawBalls, 20);
    
    document.getElementById('gravitySlider').oninput = function() {
      updateGravity(this.value);
    };
  </script>
</body>
</html>