Hockey Tapper

🏒 冰球Tapper


一款基于物理的曲棍球踢踏手游戏，展示了Claude Code的人工智能辅助开发能力

完全由 克劳德代码 在 9.2小时 （约1天）使用Figma设计、MCP集成和AI驱动的工作流程

🎮 播放演示 • 📖 文档 • 🚀 快速开始 • 🤖 它是如何建造的

______________________________________________________________________

🎯 项目指标

💻 技术栈

⚡ 发展统计

______________________________________________________________________

✨ 特性

🎮 游戏机制

• ✅ 四态动画系统

Idle → 结束语→ Hit → 冷却

• ✅ 基于物理的射击

重力、速度、碰撞检测

• ✅ 5个战略目标区

分值：50-200分

• ✅ 组合乘法器系统

5层（1.0x→ 3.0x)

• ✅ 基于画布的粒子

60 FPS爆炸效果

• ✅ 混合音响系统

5种音效，每种3个实例

🔧 技术特性

• ✅ 响应式设计

320px-1920px视口

• ✅ 本地存储模式

无需后端即可工作

• ✅ 综合测试

17.89秒内通过222项测试

• ✅ 优化捆绑包

63KB压缩包

• ✅ 生产就绪

包括Vercel/Netlify配置

• ✅ Figma设计代币

通过MCP自动同步

______________________________________________________________________

🤖 使用克劳德代码构建

该项目展示了Claude Code从Figma设计构建生产就绪应用程序的能力

🚀 开发速度比较

🎨 MCP集成

• Figma MCP

自动提取设计标记、资产和组件规格

• 剧作家 MCP

视觉测试、屏幕截图验证

• 浏览器自动化

实时游戏测试

🧩 技能和工作流程

• vue游戏开发指南

组合API模式、SCSS令牌

• 猫鼬api模式

后端路由，MongoDB模式

• TDD工作流程

测试第一个开发周期

• 重构代理

代码优化迭代

🤖 人工智能能力

• 上下文感知编码

21次会议，保持状态

• 自动化测试

生成222个测试

• 文档

README、指南、架构文档

• Bug检测

实时错误识别

📊 开发时间线

实际开发：9.2小时，1.2天

Session 1 (Nov 11, 15:05-15:08) - 0.6h: Project Setup
├─ Vue 3 + Vite scaffold
├─ Design token extraction (Figma MCP)
└─ Initial component structure

Session 2 (Nov 11, 17:20-17:49) - 1.0h: Core Mechanics
├─ Animation state machine
├─ Physics composables
└─ Canvas scaling system

Session 3 (Nov 12, 00:29) - 0.5h: Character System
└─ Character animation integration

Session 4 (Nov 12, 03:11) - 0.5h: Sound System
└─ Audio pooling + sound effects

Session 5 (Nov 12, 09:04-13:18) - 4.7h: Major Features
├─ Particle effects engine
├─ Combo multiplier system (5 tiers)
├─ Test suite generation (222 tests)
└─ Collision detection refinement

Session 6 (Nov 12, 17:24-17:28) - 0.6h: Polish
└─ UI/UX improvements

Session 7 (Nov 12, 19:44-20:33) - 1.3h: Production Ready
├─ Target positioning fixes
├─ localStorage mode
├─ Modal improvements
└─ Documentation

结果：生产就绪的游戏，7785 LOC，222测试，全功能集

💡 关键见解

是什么让26-35倍的速度增益成为可能：

1. Figma→ 代码管道 （快约200倍）

- 传统：2-3周手动提取设计标记，编写CSS - 克劳德代码：使用Figma MCP自动提取，时间\ 注： 前端独立工作（本地存储模式），无需后端！

______________________________________________________________________

🌐 在线演示

🎮 立即播放：https://hockey-tapper-web.vercel.app/

📦 演示如何工作

现场演示运行 本地存储模式，这意味着：

✅ 无需后端

• 所有游戏数据都存储在浏览器本地
• 排行榜在会话之间持续存在
• 初始加载后脱机工作

✅ 永久用户名

• 您的用户名会自动保存
• 分数与您的用户名相关联
• 数据仅保留在浏览器中

✅ 本地排行榜

• 存储在中的前20分 localStorage
• 限制为1MB的浏览器存储空间
• 每个浏览器/设备都有自己的排行榜

🗄️ 本地存储结构

// Stored keys
"hockey_tapper_username" → Your player name (string)
"hockey_tapper_scores" → Array of score objects (JSON)

// Score object format
{
  userId: "Player",      // Username
  score: 1500,           // Final score
  createdAt: "2025-01-12T..." // Timestamp
}

🔄 在模式之间切换

本地存储模式（演示）：

# Deploy frontend only
cd apps/web
npm run build
npx vercel --prod

完整后端模式（本地）：

# Requires MongoDB connection
npm run dev  # Both frontend + backend

注： 要使用MongoDB的完整后端，请参阅 部署.md 有关数据库设置说明。

______________________________________________________________________

🎮 如何玩

💯 评分系统

Base Score = Target Value (50, 100, or 200 points)
Accuracy Bonus = +0-50 pts (based on center distance)
Combo Multiplier = 1.0x → 3.0x (based on consecutive hits)

Final Score = (Base + Accuracy) × Combo Multiplier

组合层：

• 🔹 第1级： 0-4次点击→ 1.0x乘数
• 🔹 第2级： 5-9次点击→ 1.2x乘数
• 🔸 第3级： 10-14次点击→ 1.5x乘数
• 🔶 第4级： 15-19次点击→ 2.0x乘数
• 🔥 第5级： 20+次点击→ 3.0x乘数（MAX！）

______________________________________________________________________

🛠️ 发展

命令

命令	描述	徽章
npm run dev	启动前端和后端
npm run web	仅限前端（：5173）
npm run server	仅后端（：8080）
npm run test	运行所有测试（222个测试）
npm run build	生产建设
npm run lint	覆盖所有工作区

工作区结构

hockey-tapper/
├── apps/
│   ├── web/                 # Vue 3 frontend
│   │   ├── src/
│   │   │   ├── components/  # Vue components
│   │   │   ├── composables/ # Reusable logic (physics, combo, sound)
│   │   │   ├── config/      # Game configuration
│   │   │   ├── services/    # API client
│   │   │   └── styles/      # SCSS + Figma design tokens
│   │   ├── public/assets/   # Game assets (sprites, sounds)
│   │   └── dist/            # Production build (63KB gzipped)
│   └── server/              # Express backend
│       ├── src/
│       │   ├── models/      # Mongoose schemas
│       │   ├── routes/      # API endpoints
│       │   └── index.js     # Server entry
│       └── .env             # Environment config
├── docs/                    # Documentation
│   ├── archive/             # Session history (21 sessions)
│   ├── guides/              # Technical guides
│   └── specs/               # Feature specifications
├── packages/                # Shared code (future)
└── docker/                  # MongoDB Docker setup

______________________________________________________________________

🧪 测试

覆盖范围细分

运行测试

cd apps/web
npm run test                  # All tests
npm run test -- --watch       # Watch mode
npm run test -- --coverage    # Coverage report

______________________________________________________________________

🎨 技术栈

前端

    

后端

](https://nodejs.org/)   

工具

  ](https://docs.npmjs.com/cli/v7/using-npm/workspaces)

______________________________________________________________________

📦 部署

60秒内部署

  ](https://pages.github.com/)

快速部署（仅限前端）

Vercel：

cd apps/web
npx vercel --prod

Netlify：

cd apps/web
npx netlify deploy --prod --dir=dist

GitHub页面：

cd apps/web
npm run build
npx gh-pages -d dist

全栈部署

看 部署.md 用于：

• ☁️ 后端部署（Railway、Render、Fly.io）
• 🗄️ 数据库设置（MongoDB Atlas）
• 🔐 环境配置
• 🚀 CI/CD管道

______________________________________________________________________

📚 文档

______________________________________________________________________

🗺️ 路线图

已完成的里程碑✅

M1: MVP (Week 1) - ✅ Complete

• ✅ 带定时器的基本水龙头机械装置
• ✅ 分数持久性（MongoDB）
• ✅ 排行榜显示
• ✅ Figma的设计代币

M2: Core Mechanics (Weeks 2-4) - ✅ Complete

• ✅ 角色动画系统（4个状态）
• ✅ Puck物理学与碰撞检测
• ✅ 目标区域（5个位置）
• ✅ 视觉反馈（粒子、分数弹出窗口）
• ✅ 通过精准度奖励增强评分

M2.5: Production Ready (Week 5) - ✅ Complete

• ✅ 组合乘数系统（5层）
• ✅ 池化音效
• ✅ 综合测试套件（222项测试）
• ✅ 生产构建优化（63KB）
• ✅ 部署配置

即将到来的里程碑🚧

M3: Telegram Integration (Weeks 6-7)

• \[\]Telegram WebApp SDK集成
• \[\]通过Telegram进行用户身份验证
• \[\]主题支持（亮/暗模式）
• \[\]触觉反馈
• \[\]挑战的深度链接

M4: Enhanced Gameplay (Weeks 8-10)

• \[\]多个可玩角色（共5个）
• \[\]加电系统（5种）
• \[\]日常挑战
• \[\]成就体系

M5: Social & Monetization (Weeks 11-13)

• \[\]好友排行榜
• \[\]挑战好友功能
• \[\]应用内购买（Telegram Stars）
• \[\]转介系统

______________________________________________________________________

🤝 贡献

  

欢迎投稿！请在提交PR之前阅读我们的投稿指南。

1. 分叉存储库
2. 创建特征分支(git checkout -b feature/amazing-feature)
3. 提交更改(git commit -m 'feat: add amazing feature')
4. 推送到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

______________________________________________________________________

📄 许可证


MIT许可证 -看 许可证 详细信息文件

______________________________________________________________________

🙏 致谢

内置于 ❤️ 使用

  

• 克劳德代码 -人工智能辅助开发平台
• Figma MCP -设计令牌提取和资产管理
• 剧作家 MCP -可视化测试和浏览器自动化
• 使用Figma创建的设计资产
• 声音效果来自\[来源待定\]

______________________________________________________________________

🚀 准备好建立自己的？


使用人工智能辅助工作流程，开发速度提高8-10倍

______________________________________________________________________

](https://github.com/yourusername/hockey-tapper) ](https://github.com/yourusername)

⬆ 返回页首