Flappy Bird

一款使用 React + TypeScript + Canvas 开发的经典 Flappy Bird 游戏。

游戏特性

• 🎮 原版物理手感还原
• 📱 响应式设计，支持手机和 PC
• 🎯 精准碰撞检测
• 📊 本地最高分记录
• ✨ 动效反馈（旋转、屏幕震动）

快速开始

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

开发报告

一、向 AI 提问的最关键 Prompt

在开发过程中，最关键的 Prompt 包括：

1. 架构设计

   "如何用 React + TypeScript + Canvas 构建一个模块化的 Flappy Bird 游戏？请给出清晰的文件结构和职责划分。"

2. 物理引擎

   "请实现 Flappy Bird 的核心物理逻辑：重力加速度、跳跃冲力、抛物线运动轨迹，要求手感接近原版。"

3. 碰撞检测

   "如何实现精准的圆形小鸟与矩形管道的碰撞检测？需要考虑边缘接触的精确判定。"

4. 无限管道算法

   "请设计一个无限滚动的管道生成算法，要求支持随机高度、自动销毁屏幕外对象、内存管理良好。"

5. 状态管理

   "如何使用 React Hooks 管理游戏状态？包括菜单、游戏中、游戏结束三种状态的切换逻辑。"

6. 响应式适配

   "如何实现 Canvas 游戏的响应式适配，确保在手机竖屏和 PC 端都能正常显示和操作？"

二、重力参数调优过程

小鸟的物理手感是 Flappy Bird 的核心体验，我通过以下步骤进行参数调优：

1. 参数定义（src/config.ts）

export const CONFIG = {
  gravity: 0.5,      // 重力加速度
  jumpForce: -8,     // 跳跃冲力（负值向上）
  speed: 5,          // 管道移动速度
  gapSize: 200,      // 管道间隙
  rotationSpeed: 3,  // 旋转速度
  maxRotation: 35,   // 最大抬头角度
  minRotation: -60,  // 最大俯冲角度
};

2. 调优策略

重力值（gravity）调优：

• 初始值尝试 0.3：感觉太飘，下坠过慢，缺乏紧张感
• 调整为 0.5：下坠速度适中，玩家有足够时间反应
• 测试 0.7：下坠过快，难度太高，手感生硬

跳跃冲力（jumpForce）调优：

• 初始值 -6：跳跃高度不够，容易撞顶管道
• 调整为 -8：跳跃高度适中，抛物线轨迹流畅
• 测试 -10：跳跃过高，难以控制

旋转参数调优：

• rotationSpeed: 3：旋转平滑，不会显得突兀
• maxRotation: 35：抬头角度自然，符合小鸟飞行姿态
• minRotation: -60：俯冲角度足够大，视觉反馈明显

3. 关键公式

// 重力应用
velocityY = velocityY + gravity
y = y + velocityY

// 旋转控制（根据速度动态调整）
targetRotation = velocityY > 0 
  ? min(currentRotation + rotationSpeed, maxRotation)
  : max(currentRotation - rotationSpeed * 2, minRotation)

4. 手感优化技巧

• 跳跃瞬间重置旋转：点击时立即将小鸟旋转至 maxRotation（抬头），增强操作反馈
• 下落时加速旋转：下落时旋转速度是上升时的 2 倍，营造俯冲感
• 抛物线轨迹：通过恒定重力加速度实现自然的抛物线运动，避免漂浮感

项目结构

src/
├── config.ts          # 核心物理参数配置
├── types.ts           # TypeScript 类型定义
├── utils/
│   ├── physics.ts     # 物理引擎（重力、碰撞检测）
│   └── render.ts      # Canvas 渲染函数
├── hooks/
│   └── useGame.ts     # 游戏状态管理 Hook
├── components/
│   └── GameCanvas.tsx # 游戏画布组件
├── App.tsx            # 主应用组件
└── index.css          # 全局样式

操作说明

• 鼠标点击 / 空格键：跳跃
• 游戏开始：点击或按空格
• 游戏结束：再次点击或按空格重新开始

技术栈

• React 19
• TypeScript
• Vite
• HTML5 Canvas

License

MIT