JavaScript大前端
基于 Vue 3 的情侣双人飞行棋游戏源码与实现
一款基于 Vue 3 和原生 JavaScript 开发的情侣双人飞行棋网页游戏。项目包含双人对战、智能回合制、骰子系统及趣味任务系统。技术栈涵盖 Vue 3、HTML5、CSS3 和 ES6+ JavaScript。文章详细说明了核心玩法、游戏规则、文件结构、环境要求及启动方式（推荐本地服务器以解决 CORS 限制）。此外，还提供了样式定制、任务扩展及源码获取地址，适合前端开发者学习或作为情侣互动小游戏部署。
一款基于 Vue 3 和原生 JavaScript 开发的情侣双人飞行棋网页游戏。项目包含双人对战、智能回合制、骰子系统及趣味任务系统。技术栈涵盖 Vue 3、HTML5、CSS3 和 ES6+ JavaScript。文章详细说明了核心玩法、游戏规则、文件结构、环境要求及启动方式（推荐本地服务器以解决 CORS 限制）。此外，还提供了样式定制、任务扩展及源码获取地址，适合前端开发者学习或作为情侣互动小游戏部署。
一款基于 Vue 3 和原生 JavaScript 开发的网页版双人飞行棋游戏，专为情侣设计，融入了趣味任务系统和精美的视觉体验。
情侣飞行棋是一款经典棋盘游戏的网页实现版本，玩家通过掷骰子决定棋子移动步数，最先到达终点的一方获胜。游戏增加了任务系统，增加了互动性和趣味性。
| 技术 | 用途 |
|---|---|
| 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 岁时的心智或身体，你会选择保持哪一种呢，心智还是身体？","你是否曾经秘密地预感到自己会以怎样的方式死去？","说出三件你和你的伴侣看上去相同的特征。","人生中的什么东西最令你感激？","如果你能改变被抚养成人过程中的一件事，会是哪一件。","花四分钟时间，尽可能详细告诉伴侣你的人生经历。","如果你明天一觉醒来就能拥有某种才能或能力，你希望那会是什么能力呢？","如果有一个水晶球可以告诉你关于自己、人生，未来乃至任何事情的真相，你会想知道吗？","有没有什么事是你一直梦想去做而没有去做的，为什么没有做？","你人生中最大的成就是什么？","在一段友谊之中你最珍视的是什么？","你最宝贵的记忆是什么？","你最糟糕的记忆是什么？"
掷骰子 → 生成骰子点数 → 棋子移动动画 → 触发随机任务 → 玩家选择 → 完成 → 棋子前进 → 回合结束
拒绝 → 棋子后退 → 回合结束
index.html 文件由于浏览器的安全权限，直接打开 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)
},
| 元素 | 主色 | 强调色 |
|---|---|---|
| 整体背景 | 浅灰渐变 | #f5f7fa → #e4e8ec |
| 男孩主题 | 蓝色系 | #667eea → #764ba2 |
| 女孩主题 | 粉色系 | #f0c5d4 系列 |
| 按钮 | 紫色渐变 | #667eea → #764ba2 |
| 棋盘格 | 白色渐变 | #ffffff → #f8fafc |
/* 平板设备 */
@media(max-width: 768px){ ... }
/* 手机设备 */
@media(max-width: 480px){ ... }
编辑 tasks/tasks.json 文件：
{"tasks":["给你的伴侣一个拥抱","说出你们第一次约会的地方","一起做 10 个深蹲","...","添加你的自定义任务"]}
替换 img/ 目录下的图片文件：
男性棋子.png / 男性棋子.jpg：男孩棋子女性棋子.png / 女性棋子.jpg：女孩棋子
推荐使用透明背景 PNG 图片以获得最佳视觉效果。在 style.css 中可修改：
piece-img 的 height 和 widthtransition 和 animation-durationcolor 和 background注意：不同版本代码可能存在差异，建议切换对应分支查看。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online