<!DOCTYPE html>
<html lang="en">
<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://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#EC4899',
dark: '#0F172A',
darker: '#020617',
'dark-accent': '#1E293B',
light: '#F9FAFB'
},
fontFamily: {
game: ['Poppins', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.grid-bg {
background-size: 30px 30px;
background-image:
linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px);
animation: gridShift 20s linear infinite;
}
.text-shadow {
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.glow {
filter: drop-shadow(0 0 8px rgba(79, 70, 229, 0.5));
}
.food-glow {
filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.7));
}
.bg-game-gradient {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
}
.border-gradient {
border-image: linear-gradient(45deg, #4F46E5, #EC4899) 1;
}
.rainbow-1 { background: linear-gradient(90deg, #FF5E5E, #FF7D5E); }
.rainbow-2 { background: linear-gradient(90deg, #FF7D5E, #FFB347); }
.rainbow-3 { background: linear-gradient(90deg, #FFB347, #FFF275); }
.rainbow-4 { background: linear-gradient(90deg, #FFF275, #93FF96); }
.rainbow-5 { background: linear-gradient(90deg, #93FF96, #42D7F5); }
.rainbow-6 { background: linear-gradient(90deg, #42D7F5, #7D5FFF); }
.rainbow-7 { background: linear-gradient(90deg, #7D5FFF, #C774E8); }
.rainbow-8 { background: linear-gradient(90deg, #C774E8, #FF5E5E); }
</head>
<body class="bg-game-gradient font-game text-light min-h-screen flex flex-col items-center justify-start p-4 overflow-hidden pt-4">
<div class="max-w-3xl w-full flex flex-col h-[calc(100vh-2rem)]">
<header class="mb-4 flex justify-between items-center flex-shrink-0">
<h1 class="text-[clamp(1.2rem,4vw,2rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary text-shadow animate-pulse-slow">进阶版贪吃蛇</h1>
<div id="score-display" class="bg-dark/60 backdrop-blur-md px-4 py-2 rounded-lg border border-white/15 shadow-lg glow transition-all duration-300 hover:shadow-primary/20">
<span class="text-sm font-medium text-white/70">分数:</span>
<span id="score" class="text-xl font-bold ml-2 transition-all duration-300">0</span>
</div>
</header>
</body>
</html>
