网页版贪吃蛇游戏

一个基于网页平台的多人在线贪吃蛇游戏，使用现代全栈技术栈开发，从单机原型逐步演进到多人全战上线。

项目概述

这是一个完整的多人在线贪吃蛇游戏项目，支持实时多人对战、房间匹配、道具系统、排行榜等功能，并最终将在网页平台上线。

功能特性

• 🎮 经典蛇形游戏玩法
• 🌐 多人在线实时对战
• 🏠 房间创建与匹配系统
• 🎯 道具系统（加速、减速、穿墙）
• 🏆 实时排行榜
• 📱 响应式设计，支持不同设备
• 🎨 现代化的视觉设计
• ⌨️ 键盘和触摸屏控制
• 📤 微信分享功能
• 👥 好友排行榜
• 🏅 成就/奖励系统

技术架构

前端技术

• React + TypeScript
• HTML5 Canvas
• WebSocket 客户端

后端技术

• Node.js + TypeScript
• WebSocket 服务器
• Redis 缓存
• Kafka 消息队列
• REST API

部署架构

• WSL (Windows Subsystem for Linux)
• Docker 容器化
• CI/CD 自动化部署
• Grafana 数据分析

开发计划

阶段 1：单机原型

• 目标：完成单人贪吃蛇核心玩法
• 技术点：React + Canvas + TypeScript
• 输出：可玩的单机游戏，蛇吃食物、碰撞死亡

阶段 2：多人原型

• 目标：支持多人同屏对战
• 技术点：Node.js + WebSocket + TypeScript
• 输出：两个玩家可以同屏对战，实时位置同步

阶段 3：房间匹配 & 排行榜

• 目标：完善房间系统和排行榜
• 技术点：Redis + MySQL + REST API
• 输出：房间匹配、分数统计、排行榜可用

阶段 4：道具 & 特殊技能

• 目标：丰富游戏玩法
• 技术点：Node.js + 前端逻辑 + Redis缓存
• 输出：游戏玩法丰富，可测试策略互动

阶段 5：容器化部署 & CI/CD

• 目标：部署到阿里云 ECS
• 技术点：Docker + CI/CD + 阿里云 ECS
• 输出：可快速迭代上线

阶段 6：数据分析 & 日志监控

• 目标：监控游戏数据和性能
• 技术点：Grafana + Kafka + Redis
• 输出：可分析游戏数据，优化玩法与服务器性能

阶段 7：网页平台优化

• 目标：网页平台上线
• 技术点：响应式设计、性能优化
• 输出：游戏可以在网页浏览器中流畅运行，支持多设备

项目结构

SnakeGame/
├── frontend/              # 前端项目
│   ├── src/
│   │   ├── components/    # React 组件
│   │   ├── hooks/         # 自定义 hooks
│   │   ├── contexts/      # 上下文
│   │   ├── utils/         # 工具函数
│   │   ├── types/         # TypeScript 类型定义
│   │   ├── game/          # 游戏核心逻辑
│   │   ├── api/           # API 调用
│   │   └── App.tsx        # 应用入口
│   ├── public/            # 静态资源
│   ├── package.json       # 前端依赖
│   └── tsconfig.json      # TypeScript 配置
├── backend/               # 后端项目
│   ├── src/
│   │   ├── server/        # 服务器配置
│   │   ├── websocket/     # WebSocket 处理
│   │   ├── game/          # 游戏逻辑
│   │   ├── room/          # 房间管理
│   │   ├── api/           # REST API
│   │   ├── redis/         # Redis 操作
│   │   ├── kafka/         # Kafka 操作
│   │   └── index.ts       # 后端入口
│   ├── package.json       # 后端依赖
│   └── tsconfig.json      # TypeScript 配置
├── docker/                # Docker 配置
│   ├── Dockerfile.frontend
│   ├── Dockerfile.backend
│   └── docker-compose.yml
├── docs/                  # 文档
├── .gitignore             # Git 忽略文件
├── README.md              # 项目说明文件
└── LICENSE                # 许可证

如何运行

前端开发环境

# 进入前端目录
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

后端开发环境

# 进入后端目录
cd backend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

控制方式

键盘控制

• 方向键：使用方向键（↑↓←→）控制蛇的移动方向
• 空格键：暂停/继续游戏
• R 键：重新开始游戏
• 数字键 1-3：使用对应道具

游戏机制

核心玩法

• 蛇的移动：每帧更新蛇的位置，根据方向键输入改变移动方向
• 食物生成：随机在画布上生成食物，确保不会出现在蛇身上
• 碰撞检测：检测蛇是否撞到墙壁或自身
• 分数计算：每吃一个食物增加分数，蛇的长度增加
• 游戏速度：随着分数增加，游戏速度逐渐提高

多人玩法

• 房间系统：创建房间或加入好友房间
• 随机匹配：自动匹配其他玩家
• 实时同步：WebSocket 实时同步玩家位置
• 排行榜：实时更新玩家分数排名

道具系统

• 加速：暂时提高移动速度
• 减速：暂时降低其他玩家速度
• 穿墙：暂时可以穿过墙壁

开发指南

环境要求

• Node.js 14.0+
• npm 6.0+
• Redis 6.0+
• Kafka 2.0+（可选）

代码风格

• 使用 TypeScript 严格模式
• 采用模块化设计
• 遵循 ES6+ 语法
• 添加适当的注释
• 使用 ESLint 和 Prettier 保持代码风格一致

阿里云部署

容器化部署

# 构建镜像
docker-compose build

# 启动服务
docker-compose up -d

CI/CD 配置

• 使用 GitHub Actions 或 GitLab CI
• 自动构建和部署
• 环境变量配置

数据分析

Grafana 监控面板

• 活跃玩家数
• 游戏局数
• 分数分布
• 异常监控

本地 WSL 部署与 CI/CD

1. 准备工作

• 启用 WSL：在 Windows 中启用 WSL 功能
• 安装 Ubuntu：在 Microsoft Store 中安装 Ubuntu WSL 发行版
• 配置环境：在 WSL 中安装 Node.js、npm、Docker 和 Git

2. CI/CD 配置

• 选择 CI/CD 工具：使用 GitHub Actions 或 GitLab CI
• 配置工作流：创建自动化构建和部署流程
• 设置触发条件：如代码提交、PR 合并等

3. 本地开发

• 前端开发：在 frontend 目录中执行 npm run dev 启动开发服务器
• 后端开发：在 backend 目录中执行 npm run dev 启动后端服务器
• 访问游戏：在浏览器中访问 http://localhost:5173 开始游戏

4. 自动化部署

• 构建项目：CI/CD 自动执行 npm run build 构建生产版本
• 部署到 WSL：CI/CD 自动将构建产物部署到 WSL 服务器
• 配置 Nginx：在 WSL 中设置 Nginx 作为反向代理，处理静态文件

5. 监控与维护

• 数据监控：使用 Grafana 监控游戏数据和性能
• 日志管理：配置日志收集和分析
• 版本管理：通过 CI/CD 实现自动化版本更新

6. 游戏控制

• 方向键：使用方向键（↑↓←→）控制蛇的移动方向
• 空格键：暂停/继续游戏
• R 键：重新开始游戏
• 数字键 1-3：使用对应道具

贡献

欢迎提交 Issue 和 Pull Request 来改进这个游戏！

许可证

MIT License

享受游戏！ 🐍