谜面

作者

0o酱（编程，策划）

锦十三（文案，策划）

小怪兽a（主文案，策划）

背景故事

背景故事为 锦十三 撰写

这期全是刀子呜呜呜 十三老师好会写（小狗打 call

嗜欲深者天机浅

这期剧情写的很用心，所以话可能稍微有一点多（。）

前置

这里倒是没有动什么手脚，只是悄悄的做了一个暗示——守真冒险队。这里取的是道教最高奥义——形神俱妙，与道合真。

守真，守护真心。这是冒险队大家的初衷和最珍贵的品质，也是故事行文塑造角色的一条暗线。同时也是暗示了本作和道教相关，只是看起来非常不显眼就是了。

见面

你和他们见面的时候，大姐姐先和你打招呼，并嘱咐你队里有人脾气不好，千万别生罅隙——队里的大家都是她接待并组织起来的，所以她提前先告诉你，并请求你不要生气。

她是真的良善，在这个队伍里充当妈妈的角色。

果不其然，你话没说完，就有人打断你了。

——杜涉。

杜涉是队里最小的一位，也是最为任性的一位，后面甚至有为她性格的成因做出解释。

她一上来就嘲讽，倒也应了梁珊先前的交代，无论是谁，也不好意思直接翻脸了——上一句才被嘱托过。

梁珊显然也预见到了这种情况，于是直接开口为你挽回面子，稍后的淮丹也是为你开口，也正是这一动作，为后面的矛盾埋下伏笔。

杜涉和淮丹的斗嘴其实一方面为了凸显人物性格——毒舌，另一方面也是杜涉故意在你面前表现她和队里人的亲密——她已经开始不安了。她之前还能仗着自己是最小的博得一份宠爱，但是你来了，你是需要照顾的新人，你要来分去前辈对她的宠爱了，这让她感到害怕。

淮丹是什么人，他是坏蛋，但不是传统意义上的坏蛋，他的坏坏在喜欢和人斗嘴，也有自己的小心思上。你和棱眠浅浅交涉之后杜涉和淮丹相继提醒你他们两个的情侣关系，虽然不显，但他们确实是有关照你的意思的——他们在担心你因为棱眠（冷面）的区别对待而心生愤懑，从而破坏集体行动的连贯性。

这里值得一提的是，旁白部分的梁珊交涉，棱眠带路，杜涉提包和淮丹避险都是和最后的独自脱逃情节相照应的，算是笔者早早埋下的刀子罢。

古镇

杜涉迫不及待地开口，这里已经能看出她在有意贬低你和炫耀了，她在试图压你一头，并强调自己的能力。

但可惜的是，棱眠截住了话头——他只是冷面，并不是冷情之辈。他找人带你，但其实在有了之前情侣身份的铺垫之后，想也知道不可能会是梁珊做你这位“前辈”，他意有所指，是希望你们三个小辈能友好相处。杜涉心里还在别扭，她是断然不可能去揽下这个活计的，所以一切的必然都是巧合，一切的巧合也都是必然。

无论如何，你和淮丹上路了。

毫无疑问的是，淮丹非常照顾你。一路上他一直在悄悄的以一种嘴碎八卦的形式和你科普队友们的恩怨情仇和性格特点，这里其实已经在暗示淮丹的守真——信任。

他想让你尽快熟悉大家，他想了解你，想信任你。

他给你逮鬼虫，夸你能干，一部分是因为这确实是一位前辈该尽到的责任，另一个原因则是他想获得你的信任——在冒险家这个行业，单向的信任显然会致人死地。

回到镇中，其他三位已经等在那里了，这里其实也可以看出对你的照顾，淮丹一路上并没有催过你快走，快赶路之类的，但是从队友的速度来看，淮丹明显是迁就你的速度放慢了许多。

你们和杜涉斗嘴，这更进一步的加深了你与杜涉之间无形的矛盾——杜涉在队里的定位就是机关型解密，不巧的是这个八卦图就是专业对口的谜题，而你解出来了——现在她既不是最小的，也不是不可取代的了。她只会更害怕，更紧张。

但她还是在开启密室的时候出言提醒了你，虽然是想赶你走，但毫无疑问的是，她确实在担心你的安危。这里即暗示了杜涉的守真——纯洁，她做的每一件事，无论好坏，目的和动机都非常单纯，她只是想获得更多的爱。

你们下密室了。

密室第一间

杜涉无法容忍你了，但她那点小手段根本比不了淮丹和棱眠，棱眠出声喝止，淮丹出手相救，他们都已经把你视为队里的一份子了。那些小图钉其实根本不会造成什么伤害，只是小姑娘泄愤的一点作恶，但事情的本质依旧是她要伤害你，作为队长的棱眠不可能对这种事情坐视不管——这种看起来像是“偏帮”的行为又双叒叕加深了杜涉的恐惧。

你确实分走了她获得的爱，至少她是这么认为的。

她赌气向前，你们不发一言，最后大家都说，走吧。

走吧，这两个字几乎贯穿全文。

作为一名冒险家，你们只好向前，只有向前，只能向前。

——前面有光明和未来。

这里是棱眠第一个开的口，一个原因是因为队长的表率作用，一个是在写棱眠的守真——未来。棱眠一直在为他和梁珊的未来努力，无论是过去还是现在。

第一道题，石壁文字谜，笔者特意写了两个答案的哈哈哈哈，相信一定有新人直接赞同了淮丹吧？

啧啧啧，还是太年轻（被打）

杜涉果断输入淮丹答案，诚如上文所言，单向的信任会致人死地，杜涉就用一条腿学会了这个道理。你救了她，甚至是第一个做出“救”这个动作的人，这对对你抱有敌意的杜涉来说无疑是一种折磨——她想害你，你不仅没说什么，还直接救了她一命。

这对傲娇毒舌来说，简直比要命还要命。

她伏在你怀里哭，一边宣泄着对你被偏爱的不满，一边疼痛，一边为自己幼稚过头的行为道歉，一边无助。

她接下来该以什么样的面目对你？你又会怎么样看她？

简单的童谣可以很好的舒缓人的情绪，笔者未曾言出的是，这是杜涉奶奶为她哼了无数次的童谣，所以这个死要面子的少女才会崩人设一般说了句“我疼”。

她毕竟还是个孩子啊。

密室第二间

棱眠很快就通过一系列反常的行为想通了杜涉如此反常的举动到底是为了什么，一向温柔细心的梁珊更是直接抓死了少女最担心的命脉——“我们不会因为新人而放弃对你的关心”。你虽然还是有些不解，但也顺着两位前辈的话模模糊糊的知道了点什么：你占了别人的位置了。秉持着退一步海阔天空以及对伤者的照顾，你摆明自己的态度——你是我前辈，我不如你。

杜涉想通了，杜涉得到承诺了，杜涉认可你了。

她嘱咐你，不要学她逞强，其实是一个幼嫩的前辈悄悄的试探：她在学习成为一位前辈了。

又是两个走吧，那就走吧。

第二间其实有写“脚步声在房间里格外明显”，为什么？因为底下是空心的——会塌。偌大的房间也为下文梁珊的牺牲做了铺垫。这里的解密是八字真言，道教元素进行一波拉满（乐）

三次不过的话，好心的大姐姐就会带你通关喏。

不得不说的是，前辈就是有前辈的样子，他们的配合和对彼此心思的理解程度达到了一种你所不能理解的程度。杜涉一句姐梁珊就知道她想放弃自己，棱眠一句呼唤淮丹就连忙安抚，这里你无法插脚，这是他们之前出生入死无数次的默契。

但意外的是，最后接住梁珊的是你。

你知道梁珊不是因为坠崖才离开的，她替杜涉挡那一下，已经结结实实的定好了结局。爱人看着自己慢慢失去生机，或是对杜涉产生难以弥合的罅隙，这都是良善者所不愿意看到的。

她善良到不想让任何人伤心，她没想到你会接住她。

这里是梁珊的守真——善良。

隔开你和梁珊的并不是没有力气的手——你抓住她了的，是血，真正致命的是血啊。

血染红绳一线牵，一头险，两边癫。

梁珊说对不起。

对不起，棱眠，许诺过你的未来，我看不到了。

梁珊死了，她守住了她的真，棱眠活着，但他已经失去的活着的意义。

下一处险境棱眠必死无疑，他已经没有活下去的动力了。

密室第三间

淮丹说走啦。

你捡到的木雕是最后要用的关卡，三清老爷爷之一。棱眠要走了那根断掉的红绳，和自己的红绳缠绕在了一起，他的偏执一览无余。

谢谢你，谢谢你最后为我留住了一些她的东西。

这里的八卦坑了很多人（）笔者确实要负一定责任，因为这里只是单纯的从时钟角度写了前行和逆退，并没有交代清楚顺时针还是逆时针，对不起！！！

棱眠在摩挲红绳的时候就已经决定去死了——向死而生，死门是生路，生门是死路。你出声，他觉得你说的对，于是也没多解释，直接让淮丹进死门。

淮丹震了一下，因为他没有想到队长会如此干脆地放弃自己，但旋即也释然了。

淮丹这里没有详细展开，但淮丹确实是棱眠救下的人，所以在淮丹的思维里，棱眠是在提醒他该还债了。

他又有什么资格说不呢。

所以他抓紧时间向你交代了杜涉的事——以棱眠的性格必然不会告知你这些，但失去梁珊的棱眠已然是行尸走肉，接下来的路你和杜涉一定要相互帮扶。

杜涉只有奶奶，这也暗示了她为何养成了现在的性格——唯有一身尖刺，才能护自己周全。

棱眠把本子给你了，他希望你活下去，他认可了你的能力，把自己的未来给了你——这是棱眠的守真。

棱眠并不是什么无情的人，非要说，他只是把温柔全给了梁珊。

淮丹进了机关之后没有发现危险迅速想通，火急火燎地出来却只赶上你接过红绳。

红绳浸血，鲜艳欲滴。

走吧。

没有人再说话，因为队里最为年长的两个前辈都睡着了。

密室第四间

现在只剩下淮丹，你和杜涉了，所以下一个应该是淮丹……不。

淮丹确实是想保护你们的，但少女的自尊心不容许她只做一个旁观者，她已经是“前辈”了。

她帮你挡下了鬼虫，像她的前辈为她挡下鬼虫那样。既然是必死的命运，为何还要再祸害别人？如果不是行动不便，她根本不会让淮丹上台子。

“还要什么好东西？命才是好东西。”

淮丹的手被夹断了，但他不愿让你们担心，硬挤来的笑狰狞又狼狈，却是他能做到的最好。

灌血，邪恶又无能为力的机关，可作为一个注定死亡的活人，杜涉的血是热的，心也是热的。她一脚踹下去你俩，昂首挺胸，宣示着自己的骄傲，生活给予她太多重压，她却始终不曾弯腰，不算计，没恶意，纯洁的像一张白纸，爱憎都分明。最后的最后，也不过是小小的任性一把，想为自己也要一颗星星。

这是杜涉的守真。

太极现鬼虫起，你们不得不逃命——命才是好东西。别回头，别回头，淮丹见过这种可怕的虫子，他现在忍受不了失去任何人了。

但他可以失去自己，这是淮丹的守真。

你是新人，是需要照顾的新人，是很聪明的好小子，你该走下去，该“朝光跑”。

坏蛋留在黑暗里，童话故事都是这样的。

地上零散的物件故意把金贵的太极和古籍与队友们的杂物掺在一起——都是好东西，都是好东西。

你学会了所有，但教会你这些的人，都走了。

你在阳光下似乎看到了他们，他们说，走吧。

朝未来去。

彩蛋

嗜欲深者天机浅，当对话跳到最后一行，抬头看见页面标题天机浅，不知道会不会有人在意呢。

他们都有自己追求，追求幸福的生活，找星星，寻求信任……

但你不是。

故事的最初，你就是为了纯粹的冒险而来，你无欲无求，所以最后只有你留了下来。

只有你留了下来，看着那些杂物，长叹一声。

天机浅。

游戏实现

本部分将以编程实现的视角讲述游戏的实现过程与设计思路

玩法设计

本期解密采用了对话体小说的表现形式

文案老师甩给了我 1w 字左右的文案… 还不是固定格式

光是导入成配置文件就废了半条狗命…

简单来说，通过点击任意位置更新对话

对话剧情中穿插需要玩家互动解密的内容

完成所有剧情与谜题，即完成解密游戏

流程设计

  1. 游戏入口

    玩家通过扫描谜面中的二维码进入网页，参与游戏

  2. 对话剧情

    接着谜面图片的设定，扫描二维码后为“添加微信朋友”的聊天内容

    前置剧情结束后，点击按钮消息“前往古镇”，进入下一步分

  3. 前往古镇

    剧情结束后将出现“还原八卦图”按钮消息

    点击按钮进入下一部分

  4. 还原八卦图

    拖拽9块石板进行排序以还原八卦图

    设计时未考虑到有多种版本的八卦图存在，而答案却是唯一的

  5. 石壁密码

    这个部分刷掉了好多人，十三老师写的折文诗歌难度好高hhhw

    石壁上刻着:

    形为虚设法为需，德为根本人授与

    源神锻智稳心曲，若求一寂破道局

    灵体俱全生似旅，经年诵福合了趣

    慧炼玄妙祥瑞来，籍载一真默清铃

    斜着看可以看出形神俱妙，与道合真，填入输入框确认后即可进入下一部分

  6. 剧情部分

    这段作为剧情部分进行过渡，最后通过按钮跳转至下一个谜题

  7. 密室机关

    该机关有 9 个手印图标的按钮，按照九字真言顺序按下按钮即可进入下一部分

    连续错误 3 次后，NPC 将带领玩家自动过关

  8. 卦象寻门

    根据八卦卦象与提示，找出答案即可进入下一部分

  9. 古籍解密

    你们随着淮丹的手指看向古籍：

    道术万千归于一气，万物可窥皆有方法。

    自古至今屹于天地，觊觎长生实则不然。

    无心而为造化可变，操之过急往往无为。

    而欲所制铸成灾祸，顺应自然天下可治。

    阴阳协调，头尾相接，融为一体，方能求其。

    这段谜题是文案小怪兽a出的，难度比十三老师的折文诗歌略低，只需要根据提示“头尾相接”即可得出答案

    （其实应该把这个谜题放前面，难度低一点不至于刷下去那么多人hhh）

  10. 最终剧情，解密结束

  11. 剧终彩蛋

    填入暗号 THIRTEEN 点击确认后查看彩蛋

代码部分

使用 Vue3 + Typescript 开发，纯前端实现

部署至 Vercel

  • 消息气泡

    将不同的消息类型制作成 src/components/speech/*.vue 组件

    在 src/components/Msgbox.vue 组件中调用子组件

    即可根据指定格式的配置文件（ts）生成对应的消息气泡

  • 消息框更新后，滚动到底部

    使用 onUpdated 回调函数，在消息框更新后，滚动到底部

    1
    2
    3
    4
    5
    6
    onUpdated(() => {
      let div = document.getElementById("msgbox");
      if (div) {
        div.scrollTop += div.scrollHeight;
      }
    })

  • 消息框滚动条样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.05);
      -webkit-appearance: none;
    }

    ::-webkit-scrollbar-thumb {
      width: 4px;
      height: 4px;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 0.3);
    }

    ::-webkit-scrollbar-button,
    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-track-piece {
      display: none;
      background: 0 0;
    }

    针对 firefox 浏览器不支持自定义滚动条样式

    使用 scrollbar-width: thin; 使滚动条细化即可

  • 八卦图

    使用 Vue Draggable next 包，使组件可拖动排序

    css 样式中使用 display: grid 实现 3x3 网格布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .list-group {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
        .list-group-item {
            border: 1px solid #ccc;
            text-align: center;
            width: 100px;
            height: 100px;
            img {
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.5);
            }
        }
    }

  • input 类型消息 底部线条效果

    Add animation to border bottom on input - stackoverflow

  • 反作弊

    使用 vuex storage 存储关卡状态，如果进入的部分关卡状态异常

    则判断为跳关或刷新，在页面顶部将有红色字样提示

气泡设计

使用该生成器生成气泡样式css

Bubbly

↑ 这个生成器救了我半条狗命 不用手搓css真的太爽了

一共有 5 种消息类型

  • 按钮消息

    传入 label 和 onClick function

    将会展示为一个居中的按钮，可以通过传入的 router 进行路由跳转

  • 输入框

    传入 placeholder, answer 和 onSubmit function

    将会展示为一个居底的输入框，输入答案后点击确认按钮将会调用 onSubmit function

    如果 onSubmit function 返回 false 则不会跳转至下一个气泡

    如果 onSubmit function 有返回值 则会直接将返回值解析为消息并展示

  • NPC消息（文本消息）

    NPC 发送的气泡，居左

  • 系统消息（旁白）

    系统提示消息，居中

  • 玩家消息

    主角（我/玩家）发送的消息，居右

Wakatime

wakatime

本期解密码代码时长如上图所示（肝死我了，一天写 10~20 个小时代码不愧是我）

彩蛋

  • 所有 NPC 的名称都对应了其人设

    淮丹 → 坏蛋

    梁珊 → 良善

    棱眠 → 冷面

    杜涉 → 毒舌

  • 天机浅

    嗜欲深者天机浅，当对话跳到最后一行，抬头看见页面标题天机浅，不知道会不会有人在意呢。

    他们都有自己追求，追求幸福的生活，找星星，寻求信任……

    但你不是。

    故事的最初，你就是为了纯粹的冒险而来，你无欲无求，所以最后只有你留了下来。

    只有你留了下来，看着那些杂物，长叹一声。

    天机浅。