Flappy Bird 游戏

一个使用JavaScript和HTML5 Canvas开发的现代Flappy Bird游戏，具有渐进式难度系统、两种游戏模式（无尽模式和每日挑战）以及全球排行榜功能。

在线试玩

游戏特性

核心功能

• 🎮 基于HTML5 Canvas的流畅2D游戏体验
• 📱 全响应式设计，支持桌面和移动设备
• 🔄 智能适配横屏和竖屏模式
• 🌈 每次游戏随机生成小鸟颜色
• ☁️ 动态生成的云朵背景效果
• 🏆 全球排行榜，记录和展示最高分 (区分无尽模式和每日挑战)
• 🏅 新增：每日挑战模式 - 每天都有固定种子生成的关卡，挑战50个管道！
• 🔄 新增：实时排行榜更新 - 提交分数后显示排行榜更新动画
• 🔗 新增：社交媒体分享预览 - 在Telegram、WhatsApp等平台分享链接时显示游戏预览

游戏机制

• 🔄 精心设计的三阶段难度系统 (适用于无尽模式)
  • 初始难度 (0-15分): 友好的入门体验，管道间隙220像素，速度2.5
  • 中等难度 (15-60分): 适中的挑战，管道间隙180像素，速度3.0
  • 最终难度 (60分以上): 均衡挑战，管道间隙120像素，速度3.0
• 🎯 每5分增加一次难度，平滑的难度提升曲线
• 🌟 公平的判定系统：提供一定的容错空间，优化游戏体验
• 📈 管道高度变化动态调整：初级±200像素，中级±400像素，高级±600像素
• ⏱️ 管道生成频率渐进式调整：2000ms→1600ms→1400ms
• 📅 每日挑战：使用基于日期的随机种子生成固定关卡，共50个管道，难度固定在中等水平开始。

如何游玩

控制方式

• 💻 桌面设备：点击屏幕或按空格键使小鸟向上飞
• 📱 移动设备：轻触屏幕使小鸟向上飞

游戏目标

1. 选择模式：在开始界面选择"无尽模式"或"每日挑战"。
2. 无尽模式：
   • 引导小鸟穿过管道之间的间隙。
   • 每成功通过一对管道得1分。
   • 尽可能获得高分，挑战更高的难度。
   • 当分数足够高（打破个人记录且能进入前20名）时，可以提交成绩到全球排行榜。
3. 每日挑战：
   • 成功通过全部50个管道，获得50分即为挑战成功。
   • 挑战成功或失败后，分数会被记录到当天的每日挑战排行榜（如果满足提交条件）。

技术实现

前端技术

• ⚡️ 纯原生JavaScript (ES6+)，无需任何框架
• 🎨 HTML5 Canvas进行高性能游戏渲染
• 🔄 requestAnimationFrame 实现平滑游戏循环
• 📱 响应式设计，适配各种设备和屏幕方向
• 💾 localStorage 保存本地最高分记录 (区分无尽模式和每日挑战模式)
• ⚙️ 动态从后端API加载游戏配置参数

后端技术 (Vercel Serverless Functions)

• ☁️ Vercel 托管和 Serverless Functions 部署
• 📊 数据库: 使用 Vercel KV (基于 Redis) 存储全球排行榜数据。
• 🔌 API 接口 (/api/):
  • game-config: 获取游戏配置参数 (如重力、速度、难度阈值等)。
  • get-scores: 获取排行榜前20名数据 (区分模式)。
  • submit-score: 提交玩家分数到排行榜 (包含模式和日期信息，有条件限制)。
  • verify-admin: (POST) 验证管理员密码。
  • clear-leaderboard: (POST) 清空排行榜数据 (需要管理员密码)。

性能优化

• 🚀 高效的碰撞检测算法
• 🧹 自动清理屏幕外的游戏对象减少内存占用
• 📊 动态调整游戏参数以适应不同设备性能

本地开发

1. 克隆仓库

git clone https://github.com/dashhuang/game-flappy-bird.git
cd game-flappy-bird

2. 安装依赖

npm install

3. 启动本地开发服务器 (包含模拟API)

npm run dev

这将使用 nodemon 启动一个基于 Express 的本地服务器 (server.js)，该服务器提供了与 Vercel Functions 类似的模拟 API 接口，方便本地开发和测试。

4. 在浏览器中访问 http://localhost:3000

注意: 本地模拟服务器 (server.js) 使用写死的配置和排行榜数据，不连接实际的 Redis 数据库。

部署

项目已配置为自动部署到 Vercel：

1. 推送到主分支的代码将自动触发 Vercel 部署。
2. 排行榜功能依赖于 Vercel KV (需要在 Vercel 项目设置中创建并连接 KV 数据库)。
3. 管理功能 (清空排行榜) 需要在 Vercel 项目中设置名为 ADMIN_PASSWORD 的环境变量。

vercel.json 文件配置了静态文件服务和 API 路由。

管理功能

项目包含一个简单的管理页面 admin.html (访问 /admin.html)。

• 登录: 需要输入在 Vercel 环境变量中设置的 ADMIN_PASSWORD 进行登录。
• 清空排行榜: 登录后可以清空 Vercel KV 中的所有排行榜数据。此操作不可逆，请谨慎使用！

支持的浏览器

• ✅ Chrome / Edge (推荐)
• ✅ Firefox
• ✅ Safari
• ✅ iOS Safari / Android Chrome

贡献指南

欢迎提交 Pull Request 或 Issue！如有功能建议或 bug 报告，请在 GitHub 上提交 Issue。

许可

MIT License

---

开发者: dashhuang