情侣飞行棋前端分享源码,已经网络部署可直接免费访问

文章目录

• 情侣飞行棋
  • 📋 目录
  • 🎮 项目介绍
    • 核心玩法
  • ✨ 功能特点
    • 游戏功能
    • 视觉体验
    • 技术亮点
  • 🛠 技术栈
  • 📁 文件结构
  • 🎯 游戏规则
    • 基本规则
    • 回合流程
  • 📸 界面预览
    • 游戏主界面
    • 棋子选中效果
    • 任务弹窗
    • 游戏结束画面
  • 🚀 快速开始
    • 环境要求
    • 启动方式
      • 方式一：直接打开(bug)
      • 方式二：本地服务器（推荐,并不复杂）
    • 游戏操作
  • 🎨 样式亮点
    • 棋子视觉效果
    • 配色方案
    • 响应式设计
  • 🔧 扩展指南
    • 添加新任务
    • 修改棋子图片
    • 自定义样式
  • 源码分享
  • 注意事项

情侣飞行棋

一款基于 Vue 3 和原生 JavaScript 开发的网页版双人飞行棋游戏，专为情侣设计，融入了趣味任务系统和精美的视觉体验。

📋 目录

• 项目介绍
• 功能特点
• 技术栈
• 文件结构
• 游戏规则
• 界面预览
• 快速开始

🎮 项目介绍

情侣飞行棋是一款经典棋盘游戏的网页实现版本，玩家通过掷骰子决定棋子移动步数，最先到达终点的一方获胜。游戏增加了任务系统，增加了互动性和趣味性。

核心玩法

• 两名玩家轮流掷骰子
• 掷骰子后触发随机任务
• 完成或拒绝任务影响棋子移动

最先到达第64格的一方获胜

✨ 功能特点

游戏功能

• 双人对战：支持男孩和女孩双人对战
• 智能回合制：随机决定先手玩家，自动轮换回合
• 骰子系统：随机生成1-6的骰子点数
• 任务系统：每回合随机抽取趣味任务
• 胜负判定：自动检测并显示获胜方
• 游戏重置：支持重新开始游戏

视觉体验

• 现代化UI设计：采用柔和渐变配色方案
• 平滑动画效果：棋子移动、选中状态都有流畅动画
• 悬停交互：棋子悬停放大效果，增强交互感
• 响应式布局：完美适配桌面端和移动端
• 选中高亮：当前回合玩家棋子有脉冲光效
• 模态窗口：任务弹窗和游戏结束画面精美呈现

技术亮点

• Vue 3 组合式API：使用 Composition API 构建响应式数据
• 模块化设计：游戏逻辑与界面渲染分离
• 原生DOM操作：棋盘生成和棋子移动使用原生JS
• CSS动画系统：纯CSS实现丰富动画效果
• 灵活配置：任务数据外部JSON文件，易于扩展

🛠 技术栈

📁 文件结构

飞行棋/ ├── 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格
2. 通过掷骰子决定本回合移动步数（1-6格）
3. 掷骰子后必须完成随机任务
4. 完成任务：棋子正常移动
5. 拒绝任务：棋子后退相应步数
6. 任何一方棋子最先到达或越过第64格即为获胜

回合流程

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

📸 界面预览

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

游戏主界面

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

棋子选中效果

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

任务弹窗

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

游戏结束画面

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

🚀 快速开始

环境要求

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

启动方式

方式一：直接打开(bug)

1. 双击 index.html 文件
2. 在浏览器中打开即可游玩

方式二：本地服务器（推荐,并不复杂）

以下是源码瞬间获取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. 点击「掷骰子」按钮开始回合
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 

https://gitee.com/lclIzzxw/CoupleAirplaneGame 

注意事项

注意main 是毛坯版如下

注意切换不同版本代码

祝游戏愉快！ 🎲❤️

愿这只飞行棋成为你们美好时光的见证
体验网站(需要有访问github网站的网络环境):

https://mojoin.github.io/CoupleAirplaneGame/