1超级玛丽

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

    // API routes for high scores
    if (url.pathname.startsWith('/api/')) {
      if (url.pathname === '/api/scores' && request.method === 'GET') {
        try {
          const scores = await env.DB.prepare(`
            SELECT name, score, created_at 
            FROM high_scores 
            ORDER BY score DESC 
            LIMIT 10
          `).all();
          
          return new Response(JSON.stringify({ data: scores.results || [] }), {
            headers: { 'Content-Type': 'application/json' }
          });
        } catch (error) {
          return new Response(JSON.stringify({ error: 'Failed to fetch scores' }), {
            status: 500,
            headers: { 'Content-Type': 'application/json' }
          });
        }
      }

      if (url.pathname === '/api/scores' && request.method === 'POST') {
        try {
          const { name, score } = await request.json();
          
          await env.DB.prepare(`
            INSERT INTO high_scores (id, name, score, created_at)
            VALUES (?1, ?2, ?3, datetime('now'))
          `).bind(crypto.randomUUID(), name, score).run();

          return new Response(JSON.stringify({ ok: true }), {
            headers: { 'Content-Type': 'application/json' }
          });
        } catch (error) {
          return new Response(JSON.stringify({ error: 'Failed to save score' }), {
            status: 500,
            headers: { 'Content-Type': 'application/json' }
          });
        }
      }

      return new Response(JSON.stringify({ error: 'Not found' }), {
        status: 404,
        headers: { 'Content-Type': 'application/json' }
      });
    }

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

function getHTML() {
  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>超级玛丽 | Super Mario</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; }
    canvas { 
      image-rendering: pixelated; 
      border: 3px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    }
    .pixel-font {
      font-family: 'Courier New', monospace;
      font-weight: bold;
    }
  </style>
</head>
<body class="bg-gradient-to-br from-violet-900 via-purple-900 to-blue-900 min-h-screen text-white">
  <div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="text-center mb-8">
      <h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-yellow-400 to-red-500 bg-clip-text text-transparent mb-4">
        🍄 超级玛丽 🍄
      </h1>
      <p class="text-lg text-purple-200">经典复古平台跳跃游戏</p>
    </div>

    <!-- Game Container -->
    <div class="max-w-4xl mx-auto">
      <!-- Game Info -->
      <div class="flex flex-wrap justify-between items-center mb-6 bg-white/10 backdrop-blur rounded-xl p-4">
        <div class="pixel-font text-yellow-400">
          <span class="text-sm">分数: </span>
          <span id="score" class="text-xl">0</span>
        </div>
        <div class="pixel-font text-green-400">
          <span class="text-sm">生命: </span>
          <span id="lives" class="text-xl">❤️❤️❤️❤️❤️</span>
        </div>
        <div class="pixel-font text-blue-400">
          <span class="text-sm">等级: </span>
          <span id="level" class="text-xl">1</span>
        </div>
      </div>

      <!-- Game Canvas -->
      <div class="flex justify-center mb-6">
        <canvas id="gameCanvas" width="800" height="400" class="max-w-full h-auto"></canvas>
      </div>

      <!-- Controls -->
      <div class="text-center mb-6">
        <div class="bg-white/10 backdrop-blur rounded-xl p-6 inline-block">
          <h3 class="text-lg font-semibold mb-4 text-purple-200">🎮 游戏控制</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div class="bg-white/10 rounded-lg p-2">
              <div class="font-semibold">←→</div>
              <div class="text-xs text-gray-300">移动</div>
            </div>
            <div class="bg-white/10 rounded-lg p-2">
              <div class="font-semibold">空格</div>
              <div class="text-xs text-gray-300">跳跃</div>
            </div>
            <div class="bg-white/10 rounded-lg p-2">
              <div class="font-semibold">P</div>
              <div class="text-xs text-gray-300">暂停</div>
            </div>
            <div class="bg-white/10 rounded-lg p-2">
              <div class="font-semibold">R</div>
              <div class="text-xs text-gray-300">重新开始</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Start/Game Over Screen -->
      <div id="gameScreen" 
...