基于 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": [
    "如果可以在世界上所有人中任意选择，你想邀请谁共进晚餐？",
    "你想成名吗？想以什么方式成名？",
    "打电话之前你会先排练一下要说什么吗，为什么？",
    "对你来说，\"完美\"的一天是什么样的？",
    "你上次自己唱起歌来是在什么时候，给别人唱呢？",
    "如果你能活到 90 岁，同时可以一直保持 30 岁时的心智或身体，你会选择保持哪一种呢，心智还是身体？",
    "你是否曾经秘密地预感到自己会以怎样的方式死去？",
    "说出三件你和你的伴侣看上去相同的特征。",
    "人生中的什么东西最令你感激？",
    "如果你能改变被抚养成人过程中的一件事，会是哪一件。",
    "花四分钟时间，尽可能详细告诉伴侣你的人生经历。",
    "如果你明天一觉醒来就能拥有某种才能或能力，你希望那会是什么能力呢？",
    "如果有一个水晶球可以告诉你关于自己、人生，未来乃至任何事情的真相，你会想知道吗？",
    "有没有什么事是你一直梦想去做而没有去做的，为什么没有做？",
    "你人生中最大的成就是什么？",
    "在一段友谊之中你最珍视的是什么？",
    "你最宝贵的记忆是什么？",
    "你最糟糕的记忆是什么？",
    "假如你知道自己在一年内就会突然死去，你会改变现在的生活方式吗？为什么？",
    "友谊对于你来说意味着什么？",
    "爱与情感在你生活中扮演着什么样的角色？",
    "和你的伴侣轮流说出心目中对方的一个好品质，每人说五条。",
    "你的家人之间关系是否亲密而温暖，你觉得自己的童年比其他人更快乐吗？",
    "你和母亲之间的关系是怎样的？",
    "每人用\"我们\"造三个句子，并含有实际情况，比如\"我们俩在屋子里，感觉……\"",
    "补完这个句子：\"我希望和某人在一起，分享……\"",
    "如果你想和对方成为亲近的朋友，请告诉对方有什么重要的事情是他或她需要知道的。",
    "告诉对方你喜欢他或她身上的什么东西，要非常诚实，说些你不会对萍水之交说的东西。",
    "和对方分享生命中那些尴尬的时刻。",
    "你上次在别人面前哭是什么时候？自己哭呢？",
    "告诉对方，你已经喜欢上了他或她身上的什么品质。",
    "你觉得什么东西是严肃到不能开玩笑的，假如有的话。",
    "如果你今晚就将死去，而且没有机会同任何人联络，你会因为之前没有对别人说什么话而感到遗憾，你为什么到现在都没有对他们说这些话呢？",
    "假设你拥有的全部东西都在你的房子里，现在房子着了火，救出家人和宠物之后，你还有机会安全地冲进去最后一次，取出最后一件东西，你会拿什么，为什么？",
    "你的家人中，谁去世了会令你最难过，为什么？",
    "说出一件你的个人问题，问对方如果遇到此事要如何解决。另外，也要让对方如实告诉你，在他或她眼中，你对于这个问题的感受是怎样的。"
  ]
}

🎯 游戏规则

基本规则

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

回合流程

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

🚀 快速开始

环境要求

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

启动方式

方式一：直接打开（不推荐）

双击 index.html 文件在浏览器中打开即可游玩，但部分功能可能受限。

方式二：本地服务器（推荐）

由于浏览器的安全权限限制，直接打开 index.html 无法读取本地 JSON 数据，导致任务列表无法弹窗。因此建议下载源码后使用本地服务器运行。

推荐使用 VSCode 的 Live Preview 插件，或者使用 http-server 等工具启动一个本地 HTTP 服务。这样既能访问本地文件，又能满足 Fetch API 的跨域请求要求。

示例代码片段：

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":["给你的伴侣一个拥抱","说出你们第一次约会的地方","一起做 10 个深蹲","...","添加你的自定义任务"]}

修改棋子图片

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

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

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

自定义样式

在 style.css 中可修改：

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

开源地址

https://github.com/mojoin/CoupleAirplaneGame