基于 Vue 3 的情侣双人飞行棋网页版实现

项目结构

飞行棋/
├── img/                  # 图片资源目录
│   ├── boy.jpg          # 男孩玩家头像
│   ├── girl.jpg         # 女孩玩家头像
│   ├── 男性棋子.png     # 男棋子图片（透明背景）
│   ├── 女性棋子.png     # 女棋子图片（透明背景）
│   └── ...              # 其他资源
├── tasks/                # 任务数据目录
│   └── tasks.json       # 任务列表数据
├── app.js               # Vue 应用主文件，游戏逻辑控制器
├── checkerboard.js      # 棋盘生成和棋子移动逻辑
├── style.css            # 样式文件，界面美化
├── index.html           # HTML 入口文件
└── README.md            # 项目说明文档

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

{
  "title": "36 个问题",
  "description": "亲密关系 36 问",
  "type": "custom",
  "task_count": 36,
  "tasks": [
    "如果可以在世界上所有人中任意选择，你想邀请谁共进晚餐？",
    "你想成名吗？想以什么方式成名？",
    "打电话之前你会先排练一下要说什么吗，为什么？",
    "对你来说，\"完美\"的一天是什么样的？",
    "你上次自己唱起歌来是在什么时候，给别人唱呢？"
  ]
}

游戏规则

基本规则

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

回合流程

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

界面展示

💡 提示：请在游戏运行时截图并替换下方的占位图片

游戏主界面

游戏主界面展示：上方为玩家信息区，中间为掷骰子区域，下方为 8×8 棋盘。

棋子选中效果

当前回合玩家的棋子会有脉冲光效和放大效果。

任务弹窗

每回合结束后弹出随机任务，玩家可选择完成或拒绝。

游戏结束画面

获胜者信息展示，提供重新开始按钮。

运行指南

环境要求

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

启动方式

本地直接打开（存在跨域限制）

双击 index.html 文件在浏览器中打开即可游玩，但无法加载本地 JSON 任务数据。

本地服务器（推荐）

由于浏览器安全策略限制，直接打开 HTML 文件无法请求本地 JSON 资源。因此，必须通过本地服务器启动项目。

推荐使用 VS Code 的 Live Preview 插件启动本地服务。

1. 安装 Live Preview 插件
2. 在 index.html 页面右键选择'Open with Live Server'
3. 复制生成的链接在任意浏览器打开

这种方式可以正常访问本地 JSON 数据，解决跨域问题。

// 获取随机任务的代码示例
async getRandomTask() {
  const response = await fetch('./tasks/tasks.json');
  const data = await response.json();
  const tasks = 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": [
    "给你的伴侣一个拥抱",
    "说出你们第一次约会的地方",
    "一起做 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

注意事项

注意 main 分支为初始版本，建议切换至稳定分支进行开发。

在线演示地址（需访问 GitHub）： https://mojoin.github.io/CoupleAirplaneGame/