HTML Szerkesztő HTML Editor Editor de HTML HTML 编辑器 Éditeur HTML - Amőba tó Amoeba Lake Lago de amebas 阿米巴湖 Lac d’amibes

HTML Kód

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amőba Tó</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: linear-gradient(180deg, #0a2342, #1a2a6c, #3b3b98);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: 'Comic Sans MS', cursive, sans-serif;
    }

canvas {
      display: block;
      cursor: pointer;
    }

.title {
      position: absolute;
      top: 20px;
      color: white;
      font-size: 2.2em;
      text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7);
    }

.instructions {
      position: absolute;
      bottom: 30px;
      color: white;
      text-align: center;
      width: 100%;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
      font-size: 1.2em;
      animation: pulse 2s infinite;
    }

@keyframes pulse {
      0% { opacity: 0.7; }
      50% { opacity: 1; }
      100% { opacity: 0.7; }
    }
  </style>
</head>
<body>
  <h1 class="title">Amőba</h1>
  <canvas id="amoebaCanvas"></canvas>
  <div class="instructions">html.visualjournalist.pro</div>

function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener("resize", resizeCanvas);

// Színek
    const colors = [
      '#FF9AA2', '#FFB7B2', '#FFDAC1', '#E2F0CB',
      '#B5EAD7', '#C7CEEA', '#F8B195', '#F67280',
      '#C06C84', '#6C5B7B'
    ];

// Buborékok
    const bubbles = [];
    class Bubble {
      constructor() {
        this.reset();
      }
      reset() {
        this.x = Math.random() * canvas.width;
        this.y = canvas.height + 20;
        this.size = 5 + Math.random() * 10;
        this.speed = 0.5 + Math.random() * 1.5;
        this.alpha = 0.3 + Math.random() * 0.7;
      }
      update() {
        this.y -= this.speed;
        if (this.y < -20) this.reset();
      }
      draw() {
        ctx.beginPath();
        ctx.globalAlpha = this.alpha;
        ctx.fillStyle = "#aee1f9";
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.globalAlpha = 1;
      }
    }

for (let i = 0; i < 50; i++) {
      bubbles.push(new Bubble());
    }

// Amőba osztály
    class Amoeba {
      constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = 60 + Math.random() * 60;
        this.segments = 24;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.originalPoints = this.generatePoints();
        this.currentPoints = JSON.parse(JSON.stringify(this.originalPoints));
        this.angle = 0;
        this.wobbleOffset = Math.random() * Math.PI * 2;
        this.wobbleIntensity = 0.5;
        this.isExploding = false;
        this.explosionStartTime = 0;
        this.explosionDuration = 2000;
        this.targetX = this.x;
        this.targetY = this.y;
        this.speed = 0.05;
        this.particles = [];
      }

generatePoints() {
        const points = [];
        for (let i = 0; i < this.segments; i++) {
          const angle = (i / this.segments) * Math.PI * 2;
          const variation = 0.7 + Math.sin(angle * 5) * 0.3;
          const radius = this.size * variation;
          points.push({ angle, radius, originalRadius: radius });
        }
        return points;
      }

startAnimation(touchX, touchY) {
        const dx = touchX - this.x;
        const dy = touchY - this.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        this.targetX = this.x - (dx / distance) * 200;
        this.targetY = this.y - (dy / distance) * 200;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.isExploding = true;
        this.explosionStartTime = Date.now();
        for (let point of this.currentPoints) {
          point.targetRadius = point.originalRadius * (2 + Math.random() * 2);
        }
      }

update() {
        const currentTime = Date.now();
        if (this.isExploding) {
          const elapsed = currentTime - this.explosionStartTime;
          const progress = Math.min(elapsed / this.explosionDuration, 1);

this.x += (this.targetX - this.x) * this.speed;
          this.y += (this.targetY - this.y) * this.speed;

for (let point of this.currentPoints) {
            if (progress < 0.5) {
              point.radius = point.originalRadius +
                (point.targetRadius - point.originalRadius) * (progress * 2);
            } else {
              point.radius = point.targetRadius +
                (point.originalRadius - point.targetRadius) * ((progress - 0.5) * 2);
            }
          }

if (progress >= 1) this.isExploding = false;
        } else {
          this.wobbleOffset += 0.02;
          for (let i = 0; i < this.currentPoints.length; i++) {
            const point = this.currentPoints[i];
            const wobble = Math.sin(this.wobbleOffset + point.angle * 6) * this.wobbleIntensity;
            point.radius = point.originalRadius * (1 + wobble * 0.1);
          }

// lassú visszatérés középre
          this.x += (canvas.width / 2 - this.x) * 0.002;
          this.y += (canvas.height / 2 - this.y) * 0.002;
        }

this.angle += 0.01;
      }

draw() {
        let gradient = ctx.createRadialGradient(
          this.x, this.y, this.size * 0.2,
          this.x, this.y, this.size * 1.2
        );
        gradient.addColorStop(0, this.color);
        gradient.addColorStop(1, "rgba(255,255,255,0.1)");

ctx.fillStyle = gradient;
        ctx.beginPath();
        for (let i = 0; i < this.currentPoints.length; i++) {
          const point = this.currentPoints[i];
          const pulse = Math.sin(Date.now() * 0.002) * 5;
          const x = this.x + Math.cos(point.angle + this.angle) * (point.radius + pulse);
          const y = this.y + Math.sin(point.angle + this.angle) * (point.radius + pulse);
          if (i === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        ctx.closePath();
        ctx.fill();

// szemek
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(this.x - this.size * 0.3, this.y - this.size * 0.2, this.size * 0.15, 0, Math.PI * 2);
        ctx.arc(this.x + this.size * 0.3, this.y - this.size * 0.2, this.size * 0.15, 0, Math.PI * 2);
        ctx.fill();

ctx.fillStyle = "#2c003e";
        ctx.beginPath();
        ctx.arc(this.x - this.size * 0.3, this.y - this.size * 0.2, this.size * 0.07, 0, Math.PI * 2);
        ctx.arc(this.x + this.size * 0.3, this.y - this.size * 0.2, this.size * 0.07, 0, Math.PI * 2);
        ctx.fill();

ctx.strokeStyle = "#2c003e";
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.arc(this.x, this.y + this.size * 0.1, this.size * 0.3, 0.2, Math.PI - 0.2);
        ctx.stroke();
      }
    }

// Amőbák létrehozása
    const amoebas = [];
    for (let i = 0; i < 7; i++) amoebas.push(new Amoeba());

// Eseményfigyelő
    canvas.addEventListener("click", handleInteraction);
    canvas.addEventListener("touchstart", handleInteraction, { passive: true });
    function handleInteraction(e) {
      e.preventDefault();
      const rect = canvas.getBoundingClientRect();
      const x = (e.clientX || e.touches[0].clientX) - rect.left;
      const y = (e.clientY || e.touches[0].clientY) - rect.top;
      for (let amoeba of amoebas) amoeba.startAnimation(x, y);
    }

// Animáció
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// buborékok
      for (let bubble of bubbles) {
        bubble.update();
        bubble.draw();
      }

// amőbák
      for (let amoeba of amoebas) {
        amoeba.update();
        amoeba.draw();
      }

requestAnimationFrame(animate);
    }
    animate();
  </script>
</body>
</html>