Untitled

export default function MealwormEscapeGame() {
  return (
    <div className="min-h-screen bg-black text-green-400 flex flex-col items-center justify-center p-6 font-mono">
      <h1 className="text-5xl font-bold mb-4">Mealworm Escape</h1>
      <p className="text-center max-w-xl mb-8 text-lg">
        A tiny experimental arcade concept inspired by your mealworm biodegradation project.
        Dodge falling plastic waste and survive as long as possible.
      </p>

      <div className="bg-zinc-900 border border-green-500 rounded-3xl p-6 shadow-2xl max-w-2xl w-full">
        <iframe
          title="Mealworm Escape"
          srcDoc={`
            <!DOCTYPE html>
            <html>
            <head>
              <style>
                body {
                  margin: 0;
                  overflow: hidden;
                  background: black;
                  font-family: monospace;
                }
                canvas {
                  display: block;
                  margin: auto;
                  background: #0a0a0a;
                  border: 2px solid #22c55e;
                }
              </style>
            </head>
            <body>
              <canvas id="game" width="700" height="500"></canvas>
              <script>
                const canvas = document.getElementById('game');
                const ctx = canvas.getContext('2d');

                const player = {
                  x: 330,
                  y: 440,
                  w: 40,
                  h: 40,
                  speed: 6
                };

                let keys = {};
                let obstacles = [];
                let score = 0;
                let gameOver = false;

                document.addEventListener('keydown', e => keys[e.key] = true);
                document.addEventListener('keyup', e => keys[e.key] = false);

                function spawnObstacle() {
                  obstacles.push({
                    x: Math.random() * 660,
                    y: -20,
                    w: 30,
                    h: 30,
                    speed: 2 + Math.random() * 4
                  });
                }

                function drawPlayer() {
                  ctx.fillStyle = '#22c55e';
                  ctx.beginPath();
                  ctx.ellipse(player.x + 20, player.y + 20, 20, 12, 0, 0, Math.PI * 2);
                  ctx.fill();
                }

                function drawObstacles() {
                  ctx.fillStyle = '#f97316';
                  obstacles.forEach(o => {
                    ctx.fillRect(o.x, o.y, o.w, o.h);
                  });
                }

                function update() {
                  if (gameOver) return;

                  if (keys['ArrowLeft']) player.x -= player.speed;
                  if (keys['ArrowRight']) player.x += player.speed;

                  player.x = Math.max(0, Math.min(canvas.width - player.w, player.x));

                  obstacles.forEach(o => {
                    o.y += o.speed;

                    if (
                      player.x < o.x + o.w &&
                      player.x + player.w > o.x &&
                      player.y < o.y + o.h &&
                      player.y + player.h > o.y
                    ) {
                      gameOver = true;
                    }
                  });

                  obstacles = obstacles.filter(o => o.y < 520);

                  score += 0.05;
                }

                function draw() {
                  ctx.clearRect(0, 0, canvas.width, canvas.height);

                  drawPlayer();
                  drawObstacles();

                  ctx.fillStyle = '#22c55e';
                  ctx.font = '20px monospace';
                  ctx.fillText('Score: ' + Math.floor(score), 20, 30);

                  if (gameOver) {
                    ctx.fillStyle = 'red';
                    ctx.font = '40px monospace';
                    ctx.fillText('GAME OVER', 220, 250);
                    ctx.font = '20px monospace';
                    ctx.fillText('Refresh to restart', 260, 290);
                  }
                }

                function loop() {
                  update();
                  draw();
                  requestAnimationFrame(loop);
                }

                setInterval(spawnObstacle, 700);
                loop();
              <\/script>
            </body>
            </html>
          `}
          className="w-full h-[520px] rounded-2xl"
        />
      </div>

      <div className="mt-6 text-sm text-zinc-400 text-center max-w-xl">
        Use the LEFT and RIGHT arrow keys to move. Avoid the falling plastic blocks for as long as possible.
      </div>
    </div>
  );
}
Editor is loading...