情侣飞行棋前端分享源码,已经网络部署可直接免费访问
文章目录
情侣飞行棋
一款基于 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 =awaitfetch('./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 注意事项
注意main 是毛坯版如下
注意切换不同版本代码
祝游戏愉快！ 🎲❤️
愿这只飞行棋成为你们美好时光的见证
体验网站(需要有访问github网站的网络环境):
https://mojoin.github.io/CoupleAirplaneGame/ 