🀄 教学工具开发总览：可视化麻将规则助手
✅ 功能目标
我们将开发一个跨平台（网页/移动端）的麻将教学工具，核心功能包括：
-
麻将基础规则可视化讲解
-
牌型介绍、碰杠胡规则、番型讲解等。
-
-
交互式练习模块
-
拖动出牌、组牌练习、胡牌条件演示。
-
-
自动提示与错误反馈
-
实时提示合规动作，给出出错原因。
-
-
平台兼容性设计
-
Web（PC/Mobile）、Android/iOS 小程序，兼容主流系统。
-
🧩 技术架构选择
| 模块 | 技术推荐 |
|---|---|
| 前端 UI | React / Vue / Flutter |
| 动画与交互 | HTML5 Canvas / Lottie |
| 后端服务（如有） | Node.js / Firebase（轻量） |
| 数据存储 | JSON 配置 / Firestore |
| 构建工具 | Vite / Webpack |
📚 开发步骤详解
第 1 步：构建麻将牌基础数据结构
用一个 JSON 文件或 JavaScript 对象定义牌：
第 2 步：实现基础视觉展示
利用 HTML5 Canvas 或 React/Vue 动态渲染麻将牌组件。
例如 Vue 中组件结构：
第 3 步：规则模块
设计一个规则引擎模块，支持判断：
-
是否可以碰/杠/胡
-
当前手牌番型
-
模拟不同胡法
第 4 步：交互式练习场景
引入拖拽和反馈机制：
-
拖动出牌
-
自动检测是否违规
-
实时给予提示（例如“不能碰此牌”）
示例交互代码（JS）：
第 5 步：可视化流程演示
通过动画和旁白介绍规则，比如：
-
动画展示“碰”、“杠”的过程
-
动态高亮当前可操作的区域
-
番型解说：三色同顺、一气通贯等展示动画
可以使用 Lottie 实现高质量动画效果。
📱 跨平台适配建议
移动端开发推荐方案：
-
Flutter：一次开发同时输出 iOS 和 Android。
-
React Native：使用 React 构建原生体验。
-
小程序框架：Taro / UniApp 适配微信、支付宝等。
✅ 实际部署建议
Web 部署方式：
-
GitHub Pages（免费）
-
Vercel / Netlify（快速部署，自动 CI）
移动端：
-
使用 Flutter 编译 App
-
发布至 TestFlight（iOS 测试）与 Google Play 测试通道
🌟 扩展方向
-
用户账号与学习记录同步
-
真人教学视频嵌入
-
AI 错误分析建议（初级辅助）
-
多种规则支持（国标 / 广东 / 台湾 / 日本）
