我用 AI 做了一款网页版 3D 黑客密室逃脱游戏

游戏地址如下，本文涉及轻微剧透，可先玩游戏

https://yichen115.github.io/HackEscape

前段时间在 github 上看到一个项目【昨日回响】，基于 Three.js 开发的心理恐怖叙事解谜游戏，虽然建模比较粗糙，但是真的是个网页上运行的 3D 游戏，游戏中可以前后左右移动寻找物品去解谜（不过游戏玩法有点复杂，我这个脑子有点玩不懂）

image.png

https://github.com/CNSleepybear/echoes-of-yesterday

也因此对于 Three.js 这个组件起了兴趣，搜了一些网上的大神用 Three.js 开发的各种好玩的东西，比如：

3D小镇

image.png

我的世界

image.png

3D 复刻谷歌地图？

甚至随着时光流逝还有光影和云朵的变化

image.png

然后就心痒了，把 echoes-of-yesterday 项目 clone 下来，丢给 AI 让他参考学习 Three.js 做游戏的方法，给我设计一个黑客版本的密室逃脱游戏

声明：游戏中的故事背景是 AI 编的，如有雷同那真是巧了

游戏背景是一名红队测试工程师，去某公司进行常规的渗透测试，就在拿到服务器的 root shell 时，机房的大门突然关闭，随着他的探索发现原来是这家公司的 IT 主管出售了公司 240 万条客户信息，并决定栽赃到他的身上，游戏的目的就是搜集这位 IT 主管的犯罪证据并将证据发送给安全机构

image.png

游戏的操作方法很简单：

• 鼠标控制视角
• WASD 控制人物移动
• Shift 加速移动（我觉得没有加速的必要）
• E 可以与物品进行交互
• ESC 关闭弹窗

整个游戏分为四间密室，第一间密室是玩家诞生的地方，这是公司的机房，如果打开声音的话会觉得比较吵，我觉得很合理（哦对，声音也是 AI 用代码生成的）玩家需要找到门禁的密码前往下一个房间

最让我惊讶的是，这杯子、这电脑，竟然做得这么好！这可是用代码描述的啊，而且有些地方穿模我告诉 AI 后，他竟然也确实能通过代码理解物体的形状然后做出正确的修改

image.png

image.png

第二间房间是监控室，这里我就不太理解为什么 AI 会想到用磁带来保存监控？这是什么高级的方案吗

，这里的门是电脑控制的，玩家需要在监控中找到关键信息，并开启前往第三个房间的门

image.png

第三个房间是 IT 主管的办公室，笔记本电脑的建模也挺像的，甚至那个白色的圆圈，我不知道 AI 是不是想表示指纹识别模块。另外这里让我觉得比较有意思的是它用 emoji 表情做全家福照片，也挺像那么回事哈哈哈

第四个房间是机要室，一看到 AI 起的这个名字，我的脑海里就想起了机要室主任余则成hhh

玩家在机要室需要两分钟内结束掉泄露客户数据的程序，然后提交 IT 主管的犯罪证据完成游戏

image.png

如果证据没有搜集全也可以通过绿色的出口回到其他房间继续搜集

整个故事和谜题我基本没有参与，全是 AI 自己构思的，特意让 AI 设计成了关卡可以扩展的方式，在 room 文件夹中可以动态添加，欢迎大家一起来构思游戏情节和玩法，开源地址：https://github.com/yichen115/HackEscape