TraderMaster - 股票分时图画格子游戏

1. 项目简介

这是一个基于 Web 的互动游戏，玩家可以在股票分时图上，通过在“未来”的时间和价格区域绘制格子来进行下注。如果未来的股价走势符合格子设定的条件，玩家即可获胜。

2. 核心玩法 (Draft)

• 展示层：实时显示股票/加密货币的分时走势图（或模拟生成的走势）。
• 交互层：
  • 玩家选择一个未来的时间段（例如：未来 1 分钟到 2 分钟之间）。
  • 玩家在价格轴上设定一个区间（例如：价格 100.5 - 101.0）。
  • 形成一个矩形“格子”。
• 下注与结算：
  • 玩家为该格子下注一定金额/积分。
  • 判定规则（待定）：
    • 规则 A (目标区域)：价格曲线必须在指定时间段内进入并停留在格子中？
    • 规则 B (触碰即赢)：价格曲线只要触碰到格子即算赢？
    • 规则 C (区间预测)：该时间段内的收盘价必须在格子内？
    • 规则 D (避雷)：价格曲线不能碰到格子（障碍物模式）？

3. 技术架构计划

前端

• 框架: React + Vite + TypeScript
• 图表库: Lightweight Charts (TradingView) 或 ECharts - 适合高性能金融图表。
• UI 组件: Tailwind CSS + Shadcn/ui (或是 Ant Design)。
• 交互: Canvas Overlay 或 SVG 层，用于绘制游戏元素（格子、特效）。

后端

• 运行时: Node.js
• 框架: NestJS 或 Express
• 实时通信: Socket.io (用于推送实时股价、广播其他玩家操作)。
• 数据库: PostgreSQL (用户数据、交易记录) + Redis (实时缓存)。

4. 待确认需求

1. 数据源：
   • 使用真实股市数据（有延迟或需付费 API）？
   • 使用加密货币数据（7x24小时，易获取）？
   • 完全随机生成的虚拟数据（可控性高，随时可玩）？
2. 游戏模式：
   • 单机版（自己玩自己的）？
   • 多人对战版（大家在同一张图上画，位置有限制或可互相覆盖）？
3. 判定规则细节：具体的获胜条件是什么？
4. 平台：纯 Web 网页，还是需要适配移动端 H5？