test2

A classic Pac-Man game built for teenagers with vibrant purple-blue styling, featuring ghost enemies, power-ups, multiple levels, and a high score leaderboard system.

预览
源代码版本 2
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 stmt = env.DB.prepare('SELECT * FROM high_scores ORDER BY score DESC LIMIT 10');
          const scores = await stmt.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 { playerName, score } = await request.json();
          const id = crypto.randomUUID();
          const stmt = env.DB.prepare('INSERT INTO high_scores (id, player_name, score, created_at) VALUES (?1, ?2, ?3, datetime("now"))');
          await stmt.bind(id, 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' }
          });
        }
      }

      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;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; }
    .game-canvas {
      background: linear-gradient(135deg, #1e1b4b, #0f172a);
      border: 3px solid #7c3aed;
      box-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
    }
    .pulse {
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
  </style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
  <div class="w-full max-w-4xl">
    <!-- Header -->
    <div class="text-center mb-6">
      <h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-violet-500 to-blue-500 bg-clip-text text-transparent mb-2">
        🟡 吃豆人
      </h1>
      <p class="text-gray-400">使用方向键控制,吃掉所有豆子!</p>
    </div>

    <!-- Game Stats -->
    <div class="flex justify-between items-center mb-4 bg-white/5 backdrop-blur border border-white/10 rounded-xl p-4">
      <div class="text-center">
        <div class="text-sm text-gray-400">分数</div>
        <div id="score" class="text-2xl font-bold text-yellow-400">0</div>
      </div>
      <div class="text-center">
        <div class="text-sm text-gray-400">生命</div>
        <div id="lives" class="text-2xl">❤️❤️❤️</div>
      </div>
      <div class="text-center">
        <div class="text-sm text-gray-400">等级</div>
        <div id="level" class="text-2xl font-bold text-blue-400">1</div>
      </div>
    </div>

    <!-- Game Canvas -->
    <div class="flex justify-center mb-6">
      <canvas id="gameCanvas" class="game-canvas rounded-xl" width="600" height="400"></canvas>
    </div>

    <!-- Controls -->
    <div class="flex justify-center gap-4 mb-6">
      <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>
      <button id="pauseBtn" class="bg-white/10 hover:bg-white/20 px-8 py-3 rounded-xl font-semibold transition-all hover:scale-105" disabled>
        暂停
      </button>
    </div>

    <!-- Instructions -->
    <div class="bg-white/5 backdrop-blur border border-white/10 rounded-xl p-6 mb-6">
      <h3 class="text-lg font-semibold mb-3 text-center">游戏说明</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
        <div>
          <p>🎮 <strong>控制:</strong> 使用方向键移动</p>
          <p>🟡 <strong>目标:</strong> 吃掉所有小豆子</p>
        </div>
        <div>
          <p>👻 <strong>敌人:</strong> 避开幽灵</p>
          <p>⭐ <strong>道具:</strong> 大豆子让你无敌</p>
        </div>
      </div>
    </div>

    <!-- High Scores -->
    <div class="bg-white/5 backdrop-blur border border-white/10 rounded-xl p-6">
      <h3 class="text-lg font-semibold mb-4 text-center">排行榜 🏆</h3>
      <div id="highScores" class="space-y-2">

...

评论 (0)

还没有评论,来写第一条吧!