吃豆人

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

    // API routes for game state
    if (url.pathname.startsWith('/api/')) {
      if (url.pathname === '/api/highscore' && request.method === 'GET') {
        try {
          const result = await env.DB.prepare('SELECT score FROM highscores ORDER BY score DESC LIMIT 1').first();
          return new Response(JSON.stringify({ data: { highscore: result?.score || 0 } }), {
            headers: { 'Content-Type': 'application/json' }
          });
        } catch (error) {
          return new Response(JSON.stringify({ data: { highscore: 0 } }), {
            headers: { 'Content-Type': 'application/json' }
          });
        }
      }

      if (url.pathname === '/api/highscore' && request.method === 'POST') {
        try {
          const { score } = await request.json();
          await env.DB.prepare('INSERT INTO highscores (id, score, created_at) VALUES (?1, ?2, ?3)')
            .bind(crypto.randomUUID(), score, new Date().toISOString())
            .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>吃豆人游戏 - Pac-Man</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; }
    .game-board { 
      background: linear-gradient(45deg, #1e1b4b, #312e81);
      box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    }
    .wall { background: #3730a3; }
    .dot { 
      background: radial-gradient(circle, #fbbf24, #f59e0b);
      animation: glow 2s infinite alternate;
    }
    .power-dot { 
      background: radial-gradient(circle, #f97316, #ea580c);
      animation: pulse 1s infinite;
    }
    .pacman {
      background: radial-gradient(circle, #fbbf24, #f59e0b);
      animation: chomp 0.3s infinite;
    }
    .ghost {
      border-radius: 50% 50% 0 0;
      position: relative;
    }
    .ghost::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 6px;
      background: inherit;
      clip-path: polygon(0 0, 20% 100%, 40% 0, 60% 100%, 80% 0, 100% 100%, 100% 0);
    }
    @keyframes glow {
      0% { box-shadow: 0 0 5px #fbbf24; }
      100% { box-shadow: 0 0 15px #fbbf24; }
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }
    @keyframes chomp {
      0%, 100% { clip-path: circle(50%); }
      50% { clip-path: circle(35% at 50% 50%); }
    }
  </style>
</head>
<body class="bg-gray-900 text-white min-h-screen overflow-hidden">
  <!-- Game Container -->
  <div class="min-h-screen flex flex-col">
    <!-- Header -->
    <div class="bg-gradient-to-r from-violet-500 to-blue-500 p-4 shadow-lg">
      <div class="flex items-center justify-between max-w-4xl mx-auto">
        <div class="flex items-center space-x-4">
          <img src="https://pinme.page/media/ad17w78j/1.webp" alt="Logo" class="w-12 h-12 rounded-xl object-cover shadow-lg">
          <h1 class="text-2xl font-bold">吃豆人游戏</h1>
        </div>
        <div class="flex items-center space-x-6 text-sm">
          <div>分数: <span id="score" class="font-bold">0</span></div>
          <div>最高分: <span id="highscore" class="font-bold">0</span></div>
          <div>生命: <span id="lives" class="font-bold">3</span></div>
        </div>
      </div>
    </div>

    <!-- Game Area -->
    <div class="flex-1 flex items-center justify-center p-4">
      <div class="relative">
        <!-- Game Board -->
        <canvas id="gameBoard" class="game-board rounded-2xl border-4 border-violet-500 shadow-2xl"></canvas>
        
        <!-- Game Over Overlay -->
        <div id="gameOverModal" class="absolute inset-0 bg-black/80 backdrop-blur flex items-center justify-center rounded-2xl hidden">
          <div class="bg-white/10 p-8 rounded-2xl border border-white/20 text-center backdrop-blur-sm">
            <h2 class="text-3xl font-bold mb-4 bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text text-transparent">游戏结束</h2>
            <p class="text-xl mb-2">最终分数: <span id="finalScore" class="font-bold text-yellow-400">0</span></p
...