超级玛丽

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // Serve HTML
    return new Response(getHTML(), {
      headers: { 'Content-Type': 'text/html' }
    });
  }
};

function getHTML() {
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Super Mario Bros - World 1-1</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; }
    .mario-sprite {
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges;
    }
    .game-world {
      background: linear-gradient(180deg, #5c7cfa 0%, #339af0 50%, #51cf66 50%, #51cf66 100%);
    }
    .cloud {
      animation: float 4s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .coin-spin {
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      from { transform: rotateY(0deg); }
      to { transform: rotateY(360deg); }
    }
  </style>
</head>
<body class="bg-gray-900 text-white min-h-screen overflow-hidden">
  <div class="game-world w-full h-screen relative overflow-hidden">
    <!-- Clouds -->
    <div class="cloud absolute top-16 left-32 w-16 h-10 bg-white rounded-full opacity-80"></div>
    <div class="cloud absolute top-24 right-40 w-20 h-12 bg-white rounded-full opacity-80" style="animation-delay: -2s;"></div>
    
    <!-- Score & Info -->
    <div class="absolute top-4 left-4 z-50 text-white font-bold text-lg">
      <div>MARIO</div>
      <div id="score" class="text-yellow-400">000000</div>
      <div class="mt-2">x <span id="lives">3</span></div>
    </div>
    
    <div class="absolute top-4 right-4 z-50 text-white font-bold text-lg">
      <div>TIME</div>
      <div id="timer" class="text-yellow-400">400</div>
    </div>

    <!-- Game Canvas -->
    <canvas id="gameCanvas" class="mario-sprite w-full h-full"></canvas>
    
    <!-- Controls for mobile -->
    <div class="absolute bottom-4 left-4 flex space-x-2 md:hidden z-50">
      <button id="leftBtn" class="bg-white/20 backdrop-blur rounded-xl p-3 text-white font-bold active:scale-95">←</button>
      <button id="rightBtn" class="bg-white/20 backdrop-blur rounded-xl p-3 text-white font-bold active:scale-95">→</button>
      <button id="jumpBtn" class="bg-violet-500 rounded-xl p-3 text-white font-bold active:scale-95">JUMP</button>
    </div>

    <!-- Game Over Modal -->
    <div id="gameOverModal" class="fixed inset-0 bg-black/80 backdrop-blur flex items-center justify-center z-50 hidden">
      <div class="bg-gradient-to-br from-violet-500 to-blue-500 p-8 rounded-2xl text-center">
        <h2 class="text-3xl font-bold mb-4">Game Over!</h2>
        <p class="text-lg mb-2">Score: <span id="finalScore">0</span></p>
        <p class="text-lg mb-6">Coins: <span id="finalCoins">0</span></p>
        <button id="restartBtn" class="bg-white text-violet-600 px-6 py-3 rounded-xl font-bold hover:scale-105 transition-transform">
          Play Again
        </button>
      </div>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Game state
    let gameRunning = true;
    let score = 0;
    let coins = 0;
    let lives = 3;
    let timer = 400;

    // Mario properties
    const mario = {
      x: 100,
      y: canvas.height - 150,
      width: 32,
      height: 32,
      velocityX: 0,
      velocityY: 0,
      onGround: false,
      facing: 1, // 1 for right, -1 for left
      jumpPower: -15,
      speed: 5,
      color: '#ff6b6b'
    };

    // Ground level
    const groundLevel = canvas.height - 100;
    
    // Platforms (carefully designed to be jumpable)
    const platforms = [
      { x: 300, y: groundLevel - 80, width: 100, height: 20 },
      { x: 500, y: groundLevel - 120, width: 80, height: 20 },
      { x: 700, y: groundLevel - 60, width: 120, height: 20 },
      { x: 900, y: groundLevel - 140, width: 100, height: 20 },
      { x: 1200, y: groundLevel - 100, width: 150, height: 20 }
    ];

    // Coins positioned above platforms
    const coinsData = [
      { x: 340, y: groundLevel - 140, collected: false },
      { x: 530, y: groundLevel - 180, collected: false },
      { x: 750, y: groundLevel - 120, collected: false },
      { x: 940, y: groundLevel - 200, collected: false },
      { x: 1270, y: groundLevel - 160, collected: false }
    ];

    // Enemies (goombas) - positioned with safe jumping distances
    const enemies = [
      { x: 600, y: groundLevel - 30, width: 30, height: 30, alive: true },
      { x: 1000, y: groundLevel
...