打方块-fork

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

    // API routes for high scores
    if (url.pathname.startsWith('/api/')) {
      if (request.method === 'POST' && url.pathname === '/api/score') {
        try {
          const { score, playerName } = await request.json();
          
          if (!score || !playerName) {
            return new Response(JSON.stringify({ error: 'Score and player name required' }), {
              status: 400,
              headers: { 'Content-Type': 'application/json' }
            });
          }

          await env.DB.prepare(`
            INSERT INTO high_scores (id, player_name, score, created_at)
            VALUES (?1, ?2, ?3, datetime('now'))
          `).bind(crypto.randomUUID(), playerName, 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' }
          });
        }
      }

      if (request.method === 'GET' && url.pathname === '/api/scores') {
        try {
          const { results } = await env.DB.prepare(`
            SELECT player_name, score, created_at
            FROM high_scores
            ORDER BY score DESC
            LIMIT 10
          `).all();

          return new Response(JSON.stringify({ data: 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' }
          });
        }
      }
    }

    // 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>打方块游戏 - Block Breaker</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; }
    canvas { 
      border: 2px solid rgba(255,255,255,0.2);
      border-radius: 12px;
    }
    .game-container {
      background: linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(59, 130, 246, 0.1));
      backdrop-filter: blur(20px);
    }
  </style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="text-center mb-8">
      <h1 class="text-5xl font-bold bg-gradient-to-r from-violet-500 to-blue-500 bg-clip-text text-transparent mb-4">
        🧱 打方块游戏
      </h1>
      <p class="text-gray-400 text-lg">经典的打砖块游戏，击碎方块获得道具！</p>
    </div>

    <!-- Game Area -->
    <div class="flex flex-col lg:flex-row gap-8 items-start justify-center">
      <!-- Game Canvas -->
      <div class="game-container p-6 rounded-2xl border border-white/10">
        <canvas id="gameCanvas" width="480" height="640" class="block mx-auto"></canvas>
        
        <!-- Game Controls -->
        <div class="mt-6 text-center space-y-4">
          <div class="flex justify-between items-center bg-white/5 rounded-xl p-4">
            <div>
              <span class="text-gray-400">得分：</span>
              <span id="score" class="text-2xl font-bold text-violet-400">0</span>
            </div>
            <div>
              <span class="text-gray-400">生命：</span>
              <span id="lives" class="text-2xl font-bold text-red-400">3</span>
            </div>
          </div>
          
          <!-- Power-up Display -->
          <div id="powerupInfo" class="bg-gradient-to-r from-yellow-500/20 to-orange-500/20 rounded-xl p-3 hidden">
            <div class="flex items-center justify-center gap-2">
              <span id="powerupIcon" class="text-2xl">⭐</span>
              <span id="powerupText" class="font-medium">道具激活！</span>
              <span id="powerupTimer" class="text-yellow-400"></span>
            </div>
          </div>
          
          <button id="playBtn" class="w-full bg-gradient-to-r from-violet-500 to-blue-500 hover:from-violet-600 hover:to-blue-600 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300 hover:scale-105">
            🎮 开始游戏
          </button>
          
          <div id="gameOver" class="hidden bg-red-500/20 border border-red-500/30 rounded-xl p-4">
            <h3 class="text-xl font-bold mb-2">游戏结束！</h3>
            <p class="text-gray-300 mb-4">最终得分: <span id="finalScore" class="font-bold"></span></p>
            <input type="text" id="playerName" placeholder="输入你的名字" class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-2 mb-3 focus:
...