基于 Vue 3 的情侣双人飞行棋游戏前端实现

tasks.json 为任务列表数据，可自定义修改。示例如下：

{
  "title": "36 个问题",
  "description": "亲密关系 36 问",
  "type": "custom",
  "task_count": 36,
  "tasks": [
    "如果可以在世界上所有人中任意选择，你想邀请谁共进晚餐？",
    "你想成名吗？想以什么方式成名？"
  ]
}

游戏规则

基本规则

1. 游戏开始时，两枚棋子都位于第 1 格
2. 通过掷骰子决定本回合移动步数（1-6 格）
3. 掷骰子后必须完成随机任务
4. 完成任务：棋子正常移动
5. 拒绝任务：棋子后退相应步数
6. 任何一方棋子最先到达或越过第 64 格即为获胜

回合流程

掷骰子 → 生成骰子点数 → 棋子移动动画 → 触发随机任务 → 玩家选择 → 完成 → 棋子前进 / 拒绝 → 棋子后退 → 回合结束

快速开始

环境要求

• 现代浏览器（Chrome、Firefox、Edge、Safari）
• 无需后端服务，纯静态网页

启动方式

本地开发服务器（推荐）

由于浏览器的安全权限限制，直接打开 index.html 无法读取本地 JSON 数据。建议使用本地 HTTP 服务器运行项目。

在 VS Code 中安装 Live Server 插件，右键 index.html 选择 Open with Live Server，或在终端运行 npx http-server。

游戏操作

1. 点击「掷骰子」按钮开始回合
2. 观察骰子点数和棋子移动动画
3. 根据弹出的任务，选择「完成任务」或「未完成任务」
4. 回合自动切换给另一名玩家
5. 重复步骤 1-4，直到分出胜负

样式亮点

棋子视觉效果

• 悬停效果：棋子悬停时放大 1.15 倍，阴影增强
• 选中状态：脉冲动画 + 发光效果（男孩蓝色，女孩粉色）
• 移动动画：棋子移动时有平滑的缩放过渡
• 透明背景：使用 PNG 透明背景，棋子与棋盘完美融合

配色方案

响应式设计

/* 平板设备 */
@media(max-width: 768px) { ... }
/* 手机设备 */
@media(max-width: 480px) { ... }

• 768px 断点：调整布局、棋子缩小至 40px
• 480px 断点：进一步优化，棋子缩小至 35px

扩展指南

添加新任务

编辑 tasks/tasks.json 文件：

{
  "tasks": [
    "给你的伴侣一个拥抱",
    "说出你们第一次约会的地方",
    "一起做 10 个深蹲"
  ]
}

修改棋子图片

替换 img/ 目录下的图片文件：

• 男性棋子.png / 男性棋子.jpg：男孩棋子
• 女性棋子.png / 女性棋子.jpg：女孩棋子

推荐使用透明背景 PNG 图片以获得最佳视觉效果。

自定义样式

在 style.css 中可修改：

• 棋子尺寸：.piece-img 的 height 和 width
• 动画速度：transition 和 animation-duration
• 配色方案：修改对应的 color 和 background

项目地址

• GitHub: https://github.com/mojoin/CoupleAirplaneGame