AI导哈

曲棍球点击游戏

一款基于物理引擎的曲棍球点击游戏，展示了AI辅助开发能力，适用于休闲娱乐和AI开发演示场景。

  • by ethene
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 ethene/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设计构建生产就绪应用程序的能力

🚀 开发速度比较

度量 传统开发 使用Claude代码 改进
总时间 6-8周（240-320小时） 9.2小时 （约1.2天） 速度提高26-35倍
日历时间 6-8周 29.5小时 （1天5.5小时） 40-50x压缩
代码行 约7800个位置 7785位置 相同的输出
组件 12个Vue组件 12个Vue组件 同样的复杂性
测试覆盖率 手动编写222个测试 人工智能生成222个测试 大约快10倍
Figma到代码 2-3周（人工提取） <1小时 （MCP自动同步） 速度提高约200倍

🛠️ 使用的Claude代码功能

🎨 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自动提取，时间<1小时
    • 效果：节省约80-120小时

  2. 人工智能辅助测试 （快约10倍）

    • 传统：1-2周手动编写222个测试
    • Claude Code:2小时生成综合测试套件
    • 影响：节省约38-78小时

  3. 上下文保留 （上下文切换速度提高30倍）

    • 传统：每次上下文切换30-60分钟（文档、代码审查）
    • Claude代码：~1-2分钟（即时项目状态回忆）
    • 效果：7次会话节省约50-80小时

  4. 实时调试 （大约快5倍）

    • 传统：手动浏览器测试、控制台日志记录、试错
    • Claude Code：立即识别错误并修复
    • 效果：节省约20-40小时

  5. 并行工作流 （手动不可能）

    • 编写功能时生成的测试
    • 在实施过程中创建文档
    • 在搭建脚手架时提取设计标记

生产率细分：

  • 约850 LOC/小时 （与典型的50-100 LOC/小时相比）
  • 24次测试/小时 （与典型的2-5次测试/小时相比）
  • 7个工作会议 （与传统的30-40天相比）
  • 零上下文丢失 会话之间

🚀 快速开始

先决条件

# Required
Node.js 20+
npm or pnpm

# Optional (for backend)
MongoDB 7.0

安装

# Clone repository
git clone https://github.com/yourusername/hockey-tapper.git
cd hockey-tapper

# Install dependencies (monorepo)
npm install

# Start development servers (both frontend + backend)
npm run dev

比赛将于 http://localhost:5173

注： 前端独立工作（本地存储模式），无需后端！

🌐 在线演示

🎮 立即播放：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 有关数据库设置说明。

🎮 如何玩

步骤 操作 结果
1 👆 轻按 冰球 触发射击动画
2 🎯 命中目标 得分（50-200分）
3 🔥 构建组合 连续点击增加倍数
4 ⏱️ 提前完成 在30秒内获得最大分数
5 🏆 竞争 登上排行榜

💯 评分系统

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

🧪 测试

覆盖范围细分

模块 测试 覆盖范围 描述
使用物理学 65 92% Puck物理学，碰撞检测
使用动画控制器 58 88% 动画状态机
本地存储排行榜 44 95% 存储、排序、限制
使用组合 30 90% 组合逻辑、乘数、里程碑
使用声音 25 85% 音频池、预加载、播放

运行测试

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

🎨 技术栈

前端

后端

工具

📦 部署

60秒内部署

快速部署（仅限前端）

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管道

📚 文档

文档 描述 徽章
功能.md 完整的功能规格（M1-M6）
项目_平面.md 路线图和里程碑
项目状态.md 当前进展（跟踪21次会议）
CLAUDE.md Claude Code架构指南
QUICKSTART.md 30秒设置指南
部署.md 部署清单和配置

🗺️ 路线图

已完成的里程碑✅

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倍

⬆ 返回页首

相关 MCP