Game

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

    // API routes
    if (url.pathname.startsWith('/api/')) {
      if (url.pathname === '/api/game-state' && request.method === 'GET') {
        // Return current game state (placeholder for multiplayer)
        return new Response(JSON.stringify({ 
          snakes: [],
          foods: [],
          timestamp: Date.now()
        }), {
          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>多蛇大乱斗 🐍</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>
    * { font-family: 'Inter', sans-serif; }
    canvas { 
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges;
    }
  </style>
</head>
<body class="bg-gray-900 text-white min-h-screen overflow-hidden">
  <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="max-w-6xl mx-auto flex justify-between items-center">
        <h1 class="text-2xl font-bold">🐍 多蛇大乱斗</h1>
        <div class="flex gap-6 text-sm">
          <div class="bg-white/20 px-3 py-1 rounded-xl">
            存活蛇数: <span id="aliveCount" class="font-bold">0</span>
          </div>
          <div class="bg-white/20 px-3 py-1 rounded-xl">
            总分数: <span id="totalScore" class="font-bold">0</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Game Area -->
    <div class="flex-1 flex items-center justify-center p-4">
      <div class="relative">
        <canvas 
          id="gameCanvas" 
          width="800" 
          height="600" 
          class="border-2 border-violet-500 rounded-xl shadow-2xl bg-gray-800"
        ></canvas>
        
        <!-- Game Over Overlay -->
        <div id="gameOverlay" class="absolute inset-0 bg-black/70 backdrop-blur flex items-center justify-center rounded-xl hidden">
          <div class="text-center">
            <div class="text-6xl mb-4">🐍</div>
            <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-gray-300 mb-6">使用 WASD 或方向键控制你的蛇</p>
            <button 
              id="startBtn" 
              class="bg-gradient-to-r from-violet-500 to-blue-500 hover:from-violet-600 hover:to-blue-600 px-8 py-3 rounded-xl font-semibold transition-all hover:scale-105"
            >
              开始游戏
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Instructions -->
    <div class="bg-white/5 border-t border-white/10 p-4">
      <div class="max-w-6xl mx-auto text-center text-sm text-gray-300">
        <p>🎮 使用 WASD 或方向键控制 • 🍎 吃食物增长 • ⚡ 撞墙或撞到其他蛇会死亡 • 💀 死蛇身体变成食物</p>
      </div>
    </div>
  </div>

  <script>
    class Game {
      constructor() {
        this.canvas = document.getElementById('gameCanvas');
        this.ctx = this.canvas.getContext('2d');
        this.gridSize = 20;
        this.cols = this.canvas.width / this.gridSize;
        this.rows = this.canvas.height / this.gridSize;
        
        this.snakes = [];
        this.foods = [];
        this.gameRunning = false;
        this.gameLoop = null;
        
        this.colors = [
          '#8B5CF6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444',
          '#EC4899', '#6366F1', '#84CC16', '#F97316', '#8B5A2B'
        ];
        
        this.setupEventListeners();
        this.generateInitialFood();
      }

      setupEventListeners() {
        document.getElementById('startBtn').addEventListener('click', () => {
          this.startGame();
        });

        document.addEventListener('keydown', (e) => {
          if (!this.gameRunning) return;
          
          const playerSnake = this.snakes.find(snake => snake.isPlayer);
          if (!playerSnake || playerSnake.isDead) return;

          const key = e.key.toLowerCase();
          let newDirection = null;

          switch(key) {
            case 'w':
            case 'arrowup':
              newDirection = { x: 0, y: -1 };
              break;
            case 's':
            case 'arrowdown':
              newDirection = { x: 0, y: 1 };
              break;
            case 'a':
            case 'arrowleft':
              newDirection = { x: -1, y: 0 };
              break;
            case 'd':
          
...