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.
Preview
Source CodeVersion 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">
...
No comments yet. Be the first!