2-4 人回合制掷骰桌游网页版 - 基于经典桌游 Mountain Goats 规则实现
- 完整的 Mountain Goats 桌游规则实现
- 2-4 人本地 Hotseat 模式(同屏轮流操作)
- 骰子分组交互(拖拽/点击)
- 多个 1 的特殊规则处理(可变换点数)
- 山顶争夺与击落机制
- 分数筹码收集系统
- 奖励筹码(集齐六山得分)
- 游戏存档与恢复(自动保存到 localStorage)
- 新手教程引导(首次访问自动显示)
- 中英文双语支持
- 响应式设计(桌面/移动端适配)
- 框架: Vue 3.5 + TypeScript
- 状态管理: Pinia
- 样式: Tailwind CSS 4
- 国际化: vue-i18n
- 构建工具: Vite 7
- UI 组件: Radix Vue
# 安装依赖 npm install # 启动开发服务器 npm run dev # 构建生产版本 npm run build # 预览生产版本 npm run preview
开发服务器运行在 http://localhost:3000
# 构建镜像 docker build -t mountain-goats . # 运行容器 docker run -d -p 4000:3000 --name goats mountain-goats # 访问 http://localhost:4000 # 其他命令 docker logs goats # 查看日志 docker stop goats # 停止容器 docker restart goats # 重启容器 docker rm goats # 删除容器 # 强制更新(重新构建镜像并启动) docker stop goats && docker rm goats docker build --no-cache -t mountain-goats . docker run -d -p 4000:3000 --name goats mountain-goats
src/
├── components/ # Vue 组件
│ ├── GameBoard.vue # 游戏主界面
│ ├── DiceArea.vue # 骰子操作区
│ ├── SetupScreen.vue # 玩家设置界面
│ ├── RulesModal.vue # 规则说明弹窗
│ ├── TutorialOverlay.vue # 新手教程
│ └── LanguageSwitcher.vue # 语言切换
├── stores/
│ └── game.ts # Pinia 游戏状态管理
├── lib/ # 纯游戏逻辑(无 Vue 依赖)
│ ├── gameState.ts # 状态工厂与分数计算
│ ├── rules.ts # 核心规则引擎
│ ├── turnFlow.ts # 回合状态机
│ └── endGame.ts # 结束条件与排名
├── types/
│ └── game.ts # TypeScript 类型定义
├── i18n/ # 国际化配置
│ ├── index.ts
│ └── locales/
│ ├── zh.ts # 中文翻译
│ └── en.ts # 英文翻译
├── App.vue # 根组件
└── main.ts # 入口文件
- 6 座山,编号 5-10,高度分别为 3-8 格
- 每位玩家在每座山脚放置一只山羊
- 每座山有对应分值的筹码堆
- 掷骰: 投掷 4 颗骰子
- 处理多个 1: 如果掷出多个 1,保留第一个,其余可变为任意点数(1-6)
- 分组: 将骰子分成若干组,每组点数之和对应一座山(5-10 有效)
- 移动: 有效分组对应的山上,你的山羊前进一格
- 登顶得分: 山羊到达山顶时,获得该山一枚分数筹码
- 击落对手: 登顶时如有其他玩家山羊在顶,将其击落至山脚
- 已在山顶: 再次触发该山移动时,不移动但仍拿一枚筹码
- 奖励筹码: 集齐 6 座山的筹码后,获得奖励筹码(15/12/9/6 分)
满足以下任一条件后,完成当前轮次:
- 所有奖励筹码被拿光
- 3 座或更多山的筹码堆为空
胜负判定: 总分最高者获胜。平分时比较山顶山羊数量,仍平则比较最高编号山的占领情况。
用户交互 (Components)
↓
Pinia Store (stores/game.ts)
↓
纯游戏逻辑 (lib/*.ts)
↓
不可变状态更新 → 组件重新渲染
游戏逻辑与 UI 完全解耦,所有 lib 函数为纯函数,便于测试和未来扩展(如 AI 对战、在线模式)。
- 在
src/i18n/locales/下创建新语言文件(如ja.ts) - 参照
zh.ts结构翻译所有文本 - 在
src/i18n/index.ts中注册新语言 - 更新
LanguageSwitcher.vue添加切换选项
- Chrome(推荐)
- Safari
- Edge
- Firefox
MIT