基于 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 数据，会导致任务弹窗不显示。建议使用本地服务器运行。

在 VS Code 中，可以通过安装插件或使用内置终端启动简单的 HTTP 服务。

例如使用 Python 启动：

python -m http.server 8000

然后访问 http://localhost:8000。

或者使用 Node.js 的 http-server：

npx http-server

代码中获取任务的逻辑如下，注意路径需正确：

asyncRandomTask() {
  const response = await fetch('./tasks/tasks.json');
  const data = await response.json();
  const tasks = await data.tasks;
  const randomTask = tasks[Math.floor(Math.random() * tasks.length)];
  this.task = randomTask;
  this.showTaskWindow = true;
  console.log(randomTask);
}

游戏操作

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 数组中添加内容：

{"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

Gitee 镜像地址： https://gitee.com/lclIzzxw/CoupleAirplaneGame

在线演示地址（需网络环境支持）： https://mojoin.github.io/CoupleAirplaneGame/