文章目录
- [🐍 像素贪吃蛇](#🐍 像素贪吃蛇)
-
- [✨ 游戏特性](#✨ 游戏特性)
-
- [🎮 核心功能](#🎮 核心功能)
- [💻 PC 端特性](#💻 PC 端特性)
- [📱 移动端特性](#📱 移动端特性)
- [🎨 视觉效果](#🎨 视觉效果)
- [🚀 快速开始](#🚀 快速开始)
- [📖 游戏说明](#📖 游戏说明)
- [🎯 技术实现](#🎯 技术实现)
- [📂 项目结构](#📂 项目结构)
- [🔧 配置说明](#🔧 配置说明)
- [🎨 自定义修改](#🎨 自定义修改)
- [🐛 常见问题](#🐛 常见问题)
-
- [Q: 游戏运行很卡怎么办？](#Q: 游戏运行很卡怎么办？)
- [Q: 移动端操作不灵敏？](#Q: 移动端操作不灵敏？)
- [Q: 如何调整游戏难度？](#Q: 如何调整游戏难度？)
- [Q: 能否添加音效？](#Q: 能否添加音效？)
- **🏹🏹🏹[完整代码下载](https://ai.feishu.cn/wiki/UsuvwtSfNi7LlNkn7GtcPRNcn1b)**
- **🏹🏹🏹[完整linux系统下部署文档](https://ai.feishu.cn/wiki/UsuvwtSfNi7LlNkn7GtcPRNcn1b)**
- **🏹🏹🏹[完整windows系统下部署文档](https://ai.feishu.cn/wiki/UsuvwtSfNi7LlNkn7GtcPRNcn1b)**
- **🏹🏹🏹[完整Mac系统下部署文档](https://ai.feishu.cn/wiki/UsuvwtSfNi7LlNkn7GtcPRNcn1b)**
🐍 像素贪吃蛇
一个纯前端实现的经典贪吃蛇游戏，支持 PC 端和移动端 H5，采用像素复古风格。
✨ 游戏特性
🎮 核心功能
- 经典玩法：控制贪吃蛇吃到食物，避免撞墙或撞到自己
- 评分系统：每吃一个食物获得 10 分，自动记录最高分
- 暂停/继续：随时暂停游戏，方便玩家休息
- 游戏状态：支持准备、运行、暂停、游戏结束四种状态
💻 PC 端特性
- 键盘控制：支持方向键（↑↓←→）和 WASD 键
- 流畅操作：响应灵敏，操作流畅
- 自适应布局：完美适配各种屏幕尺寸
📱 移动端特性
- 触屏滑动：在游戏区域滑动手指控制方向
- 虚拟按键：提供方向键辅助操作
- 响应式设计：针对移动设备优化的界面布局
🎨 视觉效果
- 像素风格：经典的像素复古设计
- 渐变背景：紫灰渐变的现代感背景
- 蛇身渐变：蛇身颜色随长度渐变，增加视觉效果
- 食物设计：红色苹果配绿色叶子，生动可爱
- 蛇头眼睛：根据移动方向动态调整眼睛位置
🚀 快速开始
方式一：在线部署
环境要求
- Node.js 18+
- pnpm (推荐) 或 npm
安装依赖
Bash
pnpm install开发模式
Bash
pnpm dev方式二：离线部署（推荐）
下载离线部署包
下载 pixel-snake-offline-v1.0.0.tar.gz 离线部署包。
解压并运行
Bash
# 解压压缩包
tar -xzf pixel-snake-offline-v1.0.0.tar.gz
cd pixel-snake-package
# 安装依赖
pnpm install
# 启动游戏
pnpm dev访问游戏
游戏将在 http://localhost:5000 启动。
详细部署文档
- Windows ：查看
文末直接下载 - Linux 用户：
文末直接下载 - macOS 用户：
文末直接下载
游戏将在 http://localhost:5000 启动。
生产构建
Bash
pnpm build部署启动
Bash
pnpm start📖 游戏说明
PC 端操作
| 按键 | 功能 |
|---|---|
| ↑ 或 W | 向上移动 |
| ↓ 或 S | 向下移动 |
| ← 或 A | 向左移动 |
| → 或 D | 向右移动 |
| 暂停按钮 | 暂停/继续游戏 |
| 重新开始 | 重置游戏 |
移动端操作
| 操作 | 功能 |
|---|---|
| 在画布区域滑动 | 控制移动方向 |
| 点击虚拟方向键 | 控制移动方向 |
| 暂停按钮 | 暂停/继续游戏 |
| 重新开始 | 重置游戏 |
游戏规则
- 目标：控制贪吃蛇吃到红色的食物
- 得分：每吃一个食物获得 10 分
- 增长：蛇身会随着吃食物而增长
- 失败条件 ：
- 撞到墙壁
- 撞到自己的身体
- 胜利：没有固定胜利条件，挑战最高分！
🎯 技术实现
技术栈
- 框架: Next.js 16 (App Router)
- UI 库: React 19
- 语言: TypeScript 5
- 样式: Tailwind CSS 4
- 渲染: HTML5 Canvas
核心算法
游戏循环
使用 setInterval 实现游戏主循环，每 150ms 更新一次游戏状态。
TypeScript
useEffect(() => {
const gameLoop = setInterval(() => {
// 更新蛇的位置
// 检测碰撞
// 更新分数
}, GAME_SPEED);
return () => clearInterval(gameLoop);
}, [gameStatus, nextDirection, food, score]);碰撞检测
TypeScript
// 检测墙壁碰撞
if (head.x < 0 || head.x >= CANVAS_SIZE / GRID_SIZE ||
head.y < 0 || head.y >= CANVAS_SIZE / GRID_SIZE) {
setGameStatus('gameover');
}
// 检测自身碰撞
if (prevSnake.some(segment => segment.x === head.x && segment.y === head.y)) {
setGameStatus('gameover');
}方向控制
使用 nextDirection 缓冲机制，确保每帧只改变一次方向，防止快速按键导致的自杀。
TypeScript
const handleKeyPress = (e: KeyboardEvent) => {
switch (e.key) {
case 'ArrowUp':
if (direction !== 'down') setNextDirection('up');
break;
// ... 其他方向
}
};触屏控制
通过计算触摸点与画布中心的偏移量，判断滑动方向。
TypeScript
const handleTouchStart = (e: React.TouchEvent) => {
const deltaX = touch.clientX - centerX;
const deltaY = touch.clientY - centerY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
// 水平滑动
if (deltaX > 0) setNextDirection('right');
else setNextDirection('left');
} else {
// 垂直滑动
if (deltaY > 0) setNextDirection('down');
else setNextDirection('up');
}
};📂 项目结构
Plain
├── src/
│ └── app/
│ ├── snake/
│ │ └── page.tsx # 游戏主页面
│ ├── layout.tsx # 布局组件
│ ├── page.tsx # 首页
│ └── globals.css # 全局样式
├── README.md # 本文件
├── package.json # 依赖配置
├── tsconfig.json # TypeScript 配置
├── next.config.ts # Next.js 配置
└── tailwind.config.ts # Tailwind 配置🔧 配置说明
游戏参数配置
TypeScript
const GRID_SIZE = 20; // 网格大小
const CANVAS_SIZE = 400; // 画布尺寸
const GAME_SPEED = 150; // 游戏速度 (毫秒)🎨 自定义修改
修改游戏速度
在 src/app/snake/page.tsx 中修改：
TypeScript
const GAME_SPEED = 100; // 降低数值使游戏更快修改画布大小
TypeScript
const CANVAS_SIZE = 600; // 增加画布尺寸修改网格大小
TypeScript
const GRID_SIZE = 25; // 增加网格大小修改颜色主题
在 Tailwind 类名中修改颜色，例如将 from-green-400 改为 from-red-400。
🐛 常见问题
Q: 游戏运行很卡怎么办？
A: 可能是设备性能问题，可以尝试：
- 增加游戏速度常量（减少数值）
- 减小画布尺寸
- 关闭浏览器其他标签页
Q: 移动端操作不灵敏？
A: 可以尝试使用虚拟方向键代替滑动操作。
Q: 如何调整游戏难度？
A: 修改 GAME_SPEED 常量，数值越小游戏越快。
Q: 能否添加音效？
A: 可以使用 HTML5 Audio API 或 Web Audio API 添加音效。