情侣飞行棋
一款基于 Vue 3 和原生 JavaScript 开发的网页版双人飞行棋游戏，专为情侣设计，融入了趣味任务系统和精美的视觉体验。
📋 目录
🎮 项目介绍
情侣飞行棋是一款经典棋盘游戏的网页实现版本，玩家通过掷骰子决定棋子移动步数，最先到达终点的一方获胜。游戏增加了任务系统，增加了互动性和趣味性。
核心玩法
- 两名玩家轮流掷骰子
- 掷骰子后触发随机任务
- 完成或拒绝任务影响棋子移动
最先到达第 64 格的一方获胜
✨ 功能特点
游戏功能
- 双人对战：支持男孩和女孩双人对战
- 智能回合制：随机决定先手玩家，自动轮换回合
- 骰子系统：随机生成 1-6 的骰子点数
- 任务系统：每回合随机抽取趣味任务
- 胜负判定：自动检测并显示获胜方
- 游戏重置：支持重新开始游戏
视觉体验
- 现代化 UI 设计：采用柔和渐变配色方案
- 平滑动画效果：棋子移动、选中状态都有流畅动画
- 悬停交互：棋子悬停放大效果，增强交互感
- 响应式布局：完美适配桌面端和移动端
- 选中高亮：当前回合玩家棋子有脉冲光效
- 模态窗口：任务弹窗和游戏结束画面精美呈现
技术亮点
- Vue 3 组合式 API：使用 Composition API 构建响应式数据
- 模块化设计：游戏逻辑与界面渲染分离
- 原生 DOM 操作：棋盘生成和棋子移动使用原生 JS
- CSS 动画系统：纯 CSS 实现丰富动画效果
- 灵活配置：任务数据外部 JSON 文件，易于扩展
🛠 技术栈
| 技术 | 用途 |
|---|---|
| Vue 3 | 前端框架，处理游戏状态和交互逻辑 |
| HTML5 | 构建游戏界面结构 |
| CSS3 | 样式美化、动画效果、响应式布局 |
| JavaScript (ES6+) | 游戏核心逻辑、DOM 操作 |
| Fetch API | 异步加载任务数据 |
📁 文件结构
飞行棋/
├── img/ # 图片资源目录
│ ├── boy.jpg # 男孩玩家头像
│ ├── girl.jpg # 女孩玩家头像
│ ├── 男性棋子.png # 男棋子图片（透明背景）
│ ├── 女性棋子.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-6 格）
- 掷骰子后必须完成随机任务
- 完成任务：棋子正常移动
- 拒绝任务：棋子后退相应步数
- 任何一方棋子最先到达或越过第 64 格即为获胜
回合流程
掷骰子 → 生成骰子点数 → 棋子移动动画 → 触发随机任务 → 玩家选择 → 完成 → 棋子前进 → 回合结束
拒绝 → 棋子后退 → 回合结束
📸 界面预览
💡 提示：请在游戏运行时截图并替换下方的占位图片
游戏主界面
游戏主界面展示：上方为玩家信息区，中间为掷骰子区域，下方为 8×8 棋盘
棋子选中效果
当前回合玩家的棋子会有脉冲光效和放大效果
任务弹窗
每回合结束后弹出随机任务，玩家可选择完成或拒绝
游戏结束画面
获胜者信息展示，提供重新开始按钮
🚀 快速开始
环境要求
- 现代浏览器（Chrome、Firefox、Edge、Safari）
- 无需后端服务，纯静态网页
启动方式
方式一：直接打开 (bug)
- 双击
index.html文件 - 在浏览器中打开即可游玩
方式二：本地服务器（推荐，并不复杂）
以下是源码瞬间获取 tasks.json 获取任务的代码，但是直接打开 index.html 由于浏览器的安全权限，不能读取本地 json 数据，所以你下载源码本地跑，是不会弹窗 (任务列表)，需要用以下的方法打开：
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)},
用 vscode 代码，在 index.html 代码处 右击鼠标 显示预览，需要下载插件 Live Preview。
点击后 vscode 就会有以下展示，复制此链接在任意浏览器打开即可，这其实也是本地，但是比类似于以下这个 file:///E 的方法，Live Preview 方法可以访问本地 json 数据：
file:///E:/Test//index.html
可以正常弹窗。
游戏操作
- 点击「掷骰子」按钮开始回合
- 观察骰子点数和棋子移动动画
- 根据弹出的任务，选择「完成任务」或「未完成任务」
- 回合自动切换给另一名玩家
- 重复步骤 1-4，直到分出胜负
🎨 样式亮点
棋子视觉效果
- 悬停效果：棋子悬停时放大 1.15 倍，阴影增强
- 选中状态：脉冲动画 + 发光效果（男孩蓝色，女孩粉色）
- 移动动画：棋子移动时有平滑的缩放过渡
- 透明背景：使用 PNG 透明背景，棋子与棋盘完美融合
配色方案
| 元素 | 主色 | 强调色 |
|---|---|---|
| 整体背景 | 浅灰渐变 | #f5f7fa → #e4e8ec |
| 男孩主题 | 蓝色系 | #667eea → #764ba2 |
| 女孩主题 | 粉色系 | #f0c5d4 系列 |
| 按钮 | 紫色渐变 | #667eea → #764ba2 |
| 棋盘格 | 白色渐变 | #ffffff → #f8fafc |
响应式设计
/* 平板设备 */@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
https://gitee.com/lclIzzxw/CoupleAirplaneGame
注意事项
注意切换不同版本代码。
体验网站 (需要有访问 github 网站的网络环境):
https://mojoin.github.io/CoupleAirplaneGame/
