A fun platformer game with real-time keyboard input visualization!
🎮 MCP飞跃
🚀 关于项目
MCP飞跃 是一款使用React和TypeScript构建的交互式平台游戏，展示了实时键盘输入可视化。控制角色在程序生成的平台上跳跃，同时您的键盘输入在屏幕上显示得很漂亮。
✨ 主要特点
- 🎯 实时键盘可视化 -看到你的击键变得生动起来
- 🎮 流畅的平台游戏 -基于物理运动的响应式控制
- 🎨 美丽的渐变 -充满活力的渐变背景，具有视觉吸引力
- 📱 移动响应 -针对台式机和移动设备进行了优化
- � ️ 程序平台生成 -通过动态生成的平台进行无限游戏
- ⚡ 高性能 -使用现代React挂钩和优化渲染构建
🎮 如何玩
控制
- ← 向左箭头 -向左移动
- → 向右箭头 -向右移动
- 输入/空格 -重新开始游戏（游戏结束后）
游戏玩法
- 使用箭头键左右移动角色
- 跳上平台爬得更高，增加你的分数
- 避免从屏幕底部掉落
- 尽可能获得最高分数！
评分系统
- 你的分数随着你爬得更高而增加
- 每个平台级别都会给你分数
- 挑战自己，打败你的高分！
🛠️ 安装和设置
先决条件
- Node.js（v16或更高版本）
- npm或yarn包管理器
快速开始
- 克隆存储库
git clone https://github.com/yourusername/mcp-leap.git
cd mcp-leap- 安装依赖项
npm install- 启动开发服务器
npm run dev- 打开浏览器
引导到 http://localhost:5173 开始玩！
可用脚本
| 脚本 | 描述 |
|---|---|
npm run dev | 使用热重新加载启动开发服务器 |
npm run build | 建设生产项目 |
npm run preview | 在本地预览生产版本 |
npm run lint | 运行ESLint检查代码质量 |
🏗️ 项目结构
src/
├── components/ # React components
│ ├── GameCanvas.tsx # Main game rendering component
│ ├── GameUI.tsx # Game interface and overlays
│ └── LoadingScreen.tsx # Loading screen component
├── hooks/ # Custom React hooks
│ ├── useGameEngine.ts # Core game logic hook
│ └── useImageLoader.ts # Image loading hook
├── utils/ # Game utilities
│ ├── input.ts # Keyboard input handling
│ ├── physics.ts # Physics engine
│ ├── renderer.ts # Canvas rendering
│ └── platformGenerator.ts # Platform generation
├── types/ # TypeScript type definitions
│ └── game.ts # Game-related types
├── constants/ # Game configuration
│ └── game.ts # Game constants and settings
└── assets/ # Static assets
└── load.gif # Loading animation🎨 技术亮点
现代React架构
- 定制挂钩 -模块化游戏逻辑
useGameEngine和useImageLoader - TypeScript -整个应用程序的全类型安全
- 性能优化 -通过画布到图像的转换实现高效渲染
游戏引擎功能
- 物理系统 -重力、碰撞检测和平稳运动
- 输入处理 -实时键盘输入处理
- 摄像机系统 -动态摄像头跟随玩家
- 平台生成 -程序化平台创建，实现无限游戏体验
视觉设计
- 响应式设计 -采用自适应画布尺寸的移动优先方法
- 平滑动画 -60fps游戏与requestAnimationFrame
🎯 游戏配置
游戏可通过以下方式进行高度配置 src/constants/game.ts:
export const GAME_CONFIG = {
// Physics
GRAVITY: 0.5,
JUMP_FORCE: -15,
MOVE_SPEED: 5,
FRICTION: 0.8,
// Visual - Brand Colors
BRAND_COLORS: {
YELLOW: "#FFD800",
ORANGE_LIGHT: "#FFAF00",
ORANGE: "#FF8205",
ORANGE_DARK: "#FA500F",
RED: "#E10500",
},
// Platform settings
PLATFORM_WIDTH: 120,
PLATFORM_HEIGHT: 20,
PLATFORM_SPACING: 120,
// Player settings
PLAYER_WIDTH: 90,
PLAYER_HEIGHT: 90,
};🙏 致谢
- 反应团队 -对于令人难以置信的React框架
- 维特 -用于闪电般快速构建工具
- TypeScript -让JavaScript开发成为一种乐趣