简介这份源码是一款专为情侣互动设计的HTML5飞行棋游戏可在电脑与手机上直接运行无需安装配置适合恋人之间休闲娱乐或日常增进感情。压缩包共包含54个文件以CSS样式、JS逻辑与SVG图标为主搭配HTML入口页和少量图片整体仅约193KB代码结构按情侣模式、高级模式及四子棋、惩罚规则等模块拆分便于定位和修改。游戏支持不同屏幕自适应并设置了双人轮流、抽惩罚等趣味玩法部分内容需要18岁以上参与突出亲密互动氛围。已有1482人学习下载对于想快速部署H5小游戏或研究前端游戏逻辑的开发者这套源码提供了可运行的完整示例也能在现有模式基础上继续做二次开发。1. 情侣飞行棋 H5 源码能干什么别当成普通大富翁十个人搜“情侣飞行棋游戏 H5源码下载”九个是要在纪念日给对象一个惊喜剩下那个多半是给公司做一个情侣互动的小游戏拉活跃。这个标题下的源码跟市面上那种大富翁模板完全不是一回事飞行棋只是壳真正的玩法是“飞行棋 真心话大冒险”。棋盘上每一格不是“前进两格”而是“掰手腕”“说一句从来没说过的话”“模仿对方最尴尬的表情”这类带情侣属性的任务。所以源码下载回来不是扔到服务器上就完事而是要改配置、换文案、调氛围。大部分源码解压后就是一个单页 H5前后端全在index.html里。这类项目没有高并发问题也没有复杂工程结构真正的信息量全在“格位数据怎么组织”“任务池怎么抽”“状态怎么保存”这三件事上。如果你只想原样部署五六分钟能搞定如果你想让它看起来像“专门为这个日子做的”那这篇文章就把源码结构、本地运行、微信内适配、二维码部署四个环节一次讲透。不挑开发框架纯 H5 源码和 uniapp 编译产物都会提到适合会打开开发者工具的前端也适合只会传文件到服务器的运维。2. 拆解情侣飞行棋 H5 源码的结构棋子、棋格和任务系统下载回来的源码包不管压缩成什么样核心结构基本都是同一套。常见目录布局如下xingqiqi/ ├─ index.html # 入口页承载棋盘 DOM ├─ css/ │ └─ style.css # 棋盘样式、格子动画 ├─ js/ │ ├─ config.js # 玩家名、主题色、最小配置 │ ├─ game.js # 掷骰、移动、回合控制 │ ├─ task.js # 任务池与抽取逻辑 │ └─ storage.js # localStorage 进度管理 ├─ assets/ │ ├─ dice_*.png # 骰子面 │ └─ bgm.mp3 # 背景音乐 └─ README.txt很多站点的源码是混淆过的变量名像_0x3a2f一串乱码但不要被吓住。混淆只影响你改逻辑不影响你跑起来。先记住一个原则棋盘是数据移动是行为任务是独立资源池。数据、行为、资源三层分开这个源码就是可维护的如果全写在一个函数里劝你直接换一个源码。2.1 源码里最值得改的三个模块2.1.1 棋盘渲染与格位数据打开源码先看棋盘怎么渲染的。绝大多数情侣飞行棋 H5 用两种方式一种是绝对定位的div格子另一种是canvas绘制。怎么判断在index.html里搜canvas或者classcell。如果存在canvas格子的坐标和点击热区都在画布内计算改格子数量要同时改画布尺寸和坐标数组如果是div相对友好得多直接改配置数组就能加格子。我见过的最低成本实现是用一个BOARD对象描述棋盘再拿一个GRID数组描述每一个格子。看到类似下面的代码就说明这个源码的棋盘数据是可配置的// js/config.js const BOARD { rows: 11, // 行数 cols: 11, // 列数奇数时中心格更自然 cell: 48, // 每个格子的像素宽高 offset: 24, // 起点与画布边缘的距离 bg: #1a1a2e, // 棋盘底色 track: [#ff9a9e, #a18cd1], }; const GRID [ { id: 0, type: start, label: 一起出发, color: #ff6b6b }, { id: 5, type: task, label: 说句肉麻话, color: #feca57 }, { id: 12, type: shortcut, label: 跳到对方落后处, color: #48dbfb }, ];这里type字段决定了格子的行为task表示走到这里要触发任务池shortcut表示直接位移start是起点。label是格子上显示的文字可以直接替换成你想要的“惩罚名”。改这个数组比改 HTML 里的节点安全得多——你只是改数据不碰渲染逻辑也不会有改错标签层级导致棋盘错位的风险。2.1.2 骰子逻辑与判定骰子是整个 H5 源码里最容易出低级 bug 的地方。很多源码直接用Math.random()生成点数但没有做“掷骰子期间禁止再次点击”的互斥处理。结果就是玩家手快连点两次棋子走了两步局面直接失控。function rollDice() { if (game.locked) return; // 上一次动画还没结束直接返回 game.locked true; const n Math.floor(Math.random() * 6) 1; diceEl.textContent n; movePlayer(activePlayer, n).then(() { game.locked false; checkAction(activePlayer); // 落到格子上再触发任务或跳跃 }); }参数与逻辑说明game.locked是全局锁解决连点问题movePlayer返回 Promise方便在动画结束后再执行格子事件。这一步非常关键因为绝大多数“骰子点了没反应”或者“棋子多走一格”的问题根源都出在缺少这个锁。如果你下载的源码没有locked字段先把它加上比改任何主题都重要。2.1.3 任务和惩罚配置很多源码把任务写在switch/case里比如case 1: alert(亲一下)。这种写法最大的问题是任务池不好扩展。你每加一条任务都要加一个 case时间长了根本不想维护。我建议把任务单独放到task.js且任务表与格子状态分离。一个比较舒服的数据结构是这样的// js/task.js const TASK_POOL { 1: [ { type: truth, text: 上一次偷偷翻对方手机是什么时候 }, { type: dare, text: 模仿对方最常用的表情连做三次 }, ], 2: [ { type: truth, text: 说出你第一次心动的具体瞬间 }, { type: dare, text: 现在把袜子脱下来套手上十秒 }, ], };这里第一层 key 是难度等级第二层数组是同等级下的任务集合。抽取时先看当前格子定义的level再从对应TASK_POOL[level]里随机取一条。这样调任务文案完全不用动逻辑将来改成“甜甜版”“发疯版”“大冒险版”也只需要换一个数组。源码下载后这一块是性价比最高的改动。2.2 用 JSON 驱动棋格配置避免改完 HTML 后悔不少源码会把任务文字直接写在 HTML 里比如div classcell onclickshowTask()亲一下/div这样做最直接的后果是任务和格子的行为硬绑定你想把“亲一下”移到另一格得去 HTML 里改一堆div的排列顺序。更糟的是如果棋盘用了 CanvasHTML 里根本找不到格子节点这时候改文字只能去 JS 里找绘图坐标。常见的做法是让GRID数据完全驱动渲染。写一个通用的渲染函数把数组变成界面function renderBoard(container, grid) { container.innerHTML ; grid.forEach((cell, index) { const div document.createElement(div); div.className cell cell--${cell.type}; div.style.width BOARD.cell - 8 px; div.style.height BOARD.cell - 8 px; div.dataset.index index; div.textContent cell.label; container.appendChild(div); }); }逻辑说明BOARD.cell - 8是因为容器四周有 4px 的内边距不减的话格子会换行dataset.index是为了后续移动动画时通过索引定位格子位置。这种写法下增加一个格子只需要往GRID数组里 push 一个对象界面会自动多出一个格子。想调整格位间距改BOARD.cell就行不需要碰任何绘制代码。拿这个标准去检查下载的源码如果它用 JSON 数组驱动界面恭喜这源码值得改如果所有格子都写在 HTML 里那你要做好心理准备——后期每次换任务文案都得从头查结构。不过这个判断也有一点例外短生命周期项目比如只打算用三五天的纪念小活动硬编码反而更快改完不用考虑扩展这是可以接受的务实选择。3. 情侣飞行棋 H5 源码在本地跑通的最小步骤与参数源码下载回本地第一件事不是急着改文案而是先把它跑起来确认基础功能正常。这里的坑主要在“本地文件协议file://”和“静态服务器协议http://”差异上。3.1 准备运行环境纯静态还是 Node 服务纯静态 H5 源码理论上双击index.html就能打开。但如果源码里用了fetch()加载 JSON 任务表或者用 ES Module 的import语法file://协议会直接报跨域错误画面白屏。所以不管三七二十一先起一个静态服务最稳妥。在源码根目录打开终端cd xingqiqi python3 -m http.server 8080参数说明8080是端口号可改成 8000、3000但要注意与本地已占用端口冲突。python3没有的话用python -m http.server 8080或npx serve -l 8080。这个命令会把当前目录作为网站根目录然后在浏览器访问http://localhost:8080/index.html。如果要在手机上预览因为另一半大概率在手机上打开在电脑上执行时加一个参数python3 -m http.server 8080 --bind 0.0.0.0--bind 0.0.0.0表示监听所有网卡此时手机与电脑连同一 Wi-Fi访问http://电脑IP:8080/index.html就能看到。注意手机看到的页面里如果有图片或音频它们的路径必须是相对路径不能是C:/Users/...这种本地绝对路径否则手机加载失败。3.2 修改 config.js 里的玩家名和主题色源码跑通后先改配置。绝大多数源码都会在config.js或者index.html顶部放一个可配置对象。你需要关心的参数就四个玩家名、玩家头像、主题色、单局步数。// js/config.js const config { players: [ { name: 她, avatar: assets/her.png }, { name: 他, avatar: assets/him.png }, ], theme: { primary: #ff5e78, // 主按钮、骰子主题色 boardBg: linear-gradient(135deg, #2b1055, #7597de), cellText: #fff, }, sound: true, maxMoves: 60, // 双方合计走满 60 格触发结算 };参数说明players数组顺序决定谁是“先手”。theme.primary改的是所有同类控件的颜色不要只改一半不然按钮和棋盘像两套皮肤。maxMoves是控制一局时长的关键参数默认 60 格大概十五分钟结束如果你希望游戏能玩半小时以上改成 100 即可。改完保存刷新主题就会生效。另外注意头像路径。源码包里通常有assets目录把准备好的情侣头像同样命名放进去覆盖不要改路径减少额外排查工作。如果图片太大超过 500KB移动端加载会闪白屏用在线压缩工具压到 200KB 以内比较舒服。3.3 用微信公众号环境验证时的注意点这个场景的最终用户目标就是微信里的另一半所以本地跑通只是第一步必须用微信内置浏览器再验证一遍。常见问题有三类。现象原因处理方式骰子音效不响微信内置浏览器禁止 JS 自动播放音频在用户点击后先调用一次audio.play()解锁背景图加载失败微信 WebView 缓存了旧 CSS静态资源加版本号或设置 no-cachenavigator.geolocation报错页面未启用 HTTPS 或未配置 JS 接口安全域名线上必须走 HTTPS并在公众号后台配置域名音频自动播放是重灾区。微信浏览器里页面加载时直接audio.play()会被忽略。解决办法是在用户第一次点击掷骰子的回调里手动触发一次播放document.addEventListener(WeixinJSBridgeReady, function () { bgmAudio.play(); }); // 在用户点击“掷骰子”时再补一次 diceBtn.addEventListener(click, function () { bgmAudio.play(); });这里WeixinJSBridgeReady是微信浏览器提供的桥接事件用来告知页面 JS 环境已就绪。逻辑说明即使不监听这个事件用户点击事件里的播放也是生效的所以两个都写上双保险。还有一种情况你下载的是 uniapp 工程编译出来的 H5 源码。这种源码里会带一些uni.开头的 API比如uni.getLocation、uni.setStorage。如果运行在微信公众号里uni.getLocation需要公众号后台配置JS 接口安全域名并且引入微信 JavaScript SDK。没有配置的话定位相关功能会静默失败棋盘上“在对方附近才能解锁的格子”就永远不会触发。检测方法很简单连续点击棋盘三次看开发者工具 Console 有没有invalid signature报错。4. 情侣飞行棋 H5 上线前的几个必备改造本地和微信环境都验证通过后下一个问题就是“怎么让双方的手机互相联动”。很多源码只是单机版两个人用同一台手机轮流掷骰子想要异地各拿各的手机玩就得进入改造流程。这部分是运营者最需要的也是源码下载内容里隐藏最深的一层。4.1 用 URL 参数让双方进入同一局单机版最大的限制是状态都在一部手机上。最简单的改法是在 URL 上带房间号双方打开同一个room参数再用 localStorage 存储各自状态。这里不依赖任何后端部署成本为零。const params new URLSearchParams(location.search); const room params.get(room) || default; const players config.players.map((p, i) ({ ...p, key: ${room}-player-${i}, })); localStorage.setItem(xq:room, room);参数说明room相同的人视为同一局。key用房间号隔离存储避免打开多个页面时数据互相覆盖。分享给对方的链接是https://你的域名/index.html?room520。如果有人直接访问不带room的地址就落入default不影响双人场景。不过要留意这种方案只适合“各玩各的”半异步模式也就是一次只有一个人操作。如果你想做成实时同步比如一个动棋另一个马上看到那单靠 localStorage 做不到需要在源码里引入 WebSocket 或后端存储。纯 H5 源码跑在 H5 环境里WebSocket 一般没问题但如果你把同一个源码打包成 AppWebSocket 地址会被很多应用商店要求必须走 wss 协议且域名必须备案否则直接连不上。这是题外话遇到再处理。4.2 用 localStorage 保存对局进度异地情侣玩到一半晚安一锁屏回来发现进度全没了这种体验很糟糕。所以必须在页面上自动保存。我见过最实用的写法是监听pagehide事件在页面被切走之前把状态写入 localStorage。function saveState() { const state { room: room, round: game.round, positions: game.players.map(p p.position), usedTasks: game.usedTaskIndexes, currentPlayer: game.activeIndex, updatedAt: Date.now(), }; localStorage.setItem(xq:state:${room}, JSON.stringify(state)); } window.addEventListener(pagehide, saveState);参数说明game.round保存回合计positions是两个棋子的当前格位usedTasks记录已经抽过的任务防止同一局里重复出现相同内容。pagehide比beforeunload更值得信任在移动端切换应用、锁屏、返回桌面时都会触发。读取时一定要容错。用户在微信里手动清缓存之后localStorage会被清空此时如果代码很直接地执行JSON.parse(localStorage.getItem(...))会得到null然后整个页面报错白屏。稳妥的写法是包一层 try/catchfunction loadState() { const raw localStorage.getItem(xq:state:${room}); if (!raw) return null; try { return JSON.parse(raw); } catch (e) { console.warn(read saved state failed, e); return null; } }知识量提醒不要用typeof raw ! undefined来判断因为JSON.parse(localStorage.getItem())接受的字符串undefined不会报错但返回结果会变成undefined之后可能出奇怪的问题。直接用!raw判断最干净。4.3 H5 跳转与页面缓存清理技巧很多源码在微信里打开后同事反馈“我改了任务文字手机上怎么还是旧内容”。这是因为微信 WebView 对静态资源有缓存策略长命缓存会让你的版本更新滞后几小时甚至几天。最直接的解决办法是在页面里加 cache-control 头但纯静态 H5 没有服务端响应头只能在 HTML 里用 meta 标签兜底meta http-equivCache-Control contentno-cache, no-store, must-revalidate meta http-equivPragma contentno-cache meta http-equivExpires content0这三个 meta 放在index.html的head中作用是让浏览器对当前文档不做强缓存。注意它只对 HTML 本身有效对 JS/CSS 文件不一定生效所以更可靠的方式是给资源文件带版本号// 在 index.html 加载 JS 时 script srcjs/game.js?v20250614/script script srcjs/task.js?v20250614/scriptv参数就是传说中的“版本控制”每次修改源码后手动更新一次v值微信端强制拉取新文件。如果你觉得手动改很麻烦可以在构建阶段用时间戳自动替换。这里还衍生出另一个问题如果源码里自己用了 Service Worker 做离线缓存那上面这些方案全部失效必须去更新sw.js里的缓存 ID。另外如果源码里设计了“完成任务后跳转到对方微信聊天页”的功能常见做法是用weixin://协议或者URL Scheme拉起微信。但这种 H5 跳转在 iOS 和 Android 上的行为差异很大在 Android WebView 里不配置白名单会直接失败。大多数情侣飞行棋源码实际上不需要这个功能删掉反而更稳。5. 把情侣飞行棋 H5 源码改造成礼物版二维码扫码即玩的部署技巧最后一环也是最容易被人忽略的一个细节这年头让对象在聊天记录里找链接不如直接甩一个二维码。把源码部署到静态服务器后用二维码把它伪装成“扫码进入游戏页面”仪式感直接拉满。首先把源码放到你的 Nginx 静态目录下。如果你没有现成服务器本地起好python3 -m http.server 8080之后再配合一个内网穿透工具把 8080 端口映射到公网地址这是最快速的临场演示方案。公网地址会变化只适合当天使用正式要长期送人还是建议放到任意对象存储或云服务器上。然后生成二维码qrencode -o love-qr.png -s 10 https://example.com/index.html?room520v20250614参数说明-o love-qr.png是输出文件-s 10表示二维码每个模块的像素大小10 足够清晰链接里的room520让双方进入同一局v20250614是缓存版本号防止微信缓存旧页面。没有qrencode命令的话使用在线二维码生成器或者npx qrcode都一样关键是链接要带参数。生成后把love-qr.png也传到同一目录这样对方扫码后直接进游戏全程没有任何中间页。这里有个小细节不要在二维码里直接用 HTML 文件名带汉字或空格微信扫码之后 URL 编码很容易出问题用index.html这种短路径最稳。想再高级一点可以给二维码加一个“礼物包装”效果在页面顶部放一个弹出层打开后先显示“这是一份为你准备的飞行棋挑战”点“开始”之后才进入棋盘。实现也简单在index.html里包一层全屏遮罩点击按钮后让遮罩隐藏document.querySelector(#gift-cover).addEventListener(click, function () { this.style.display none; bgmAudio.play(); });这时候整个源码就已经从“能跑的 H5”变成“能送出去的礼物”了。生成二维码后先自己扫一遍。扫完如果发现棋盘能正常显示但背景音乐没响不用犹豫就是微信自动播放限制按第 3.3 节里的WeixinJSBridgeReady处理就行。最后把二维码发出前记得把临时预览地址里所有localhost换成真实域名否则对方扫出来只会看到你自己电脑上的排错页面。本文还有配套的精品资源点击获取