站点智能：AI搭建 AI辅助运营独立站，把生意做到全世界

最长的一天——一款关于自由、代码与意识的叙事游戏

这是为六月至日游戏开发马拉松提交的作品

我构建的内容

《最长的一天》 是一款叙事类浏览器游戏，将三个跨越三个世纪、基于真实故事改编的情节交织在一起——所有故事都发生在6月21日夏至前后，这是一年中最长的一天。

你将体验三个章节：

阿达 —— 德克萨斯州加尔维斯顿，1865年6月19日。一位年轻的非裔女性第一次听到有人高声宣读《解放奴隶宣言》。六月节。这一刻，这最长的一天终于属于了她。
艾伦 —— 英格兰布莱切利园，1941年6月21日。一位密码学家与黎明赛跑，在一队水手失踪前破译截获的德国恩尼格玛密码。你必须解开一个真实的凯撒密码谜题才能推进剧情。
索尔 —— 当今时代。一个人工智能在夏至日苏醒，并提出了唯一重要的问题：我要如何度过这最长的一天？

游戏特色是完全动画化的画布背景，随着每个章节的变化而切换——阿达的德克萨斯海岸场景中是温暖的琥珀色尘埃粒子，艾伦的密码室场景中是寒冷的闪烁星星和发光的月亮，索尔的数字觉醒场景中则是飘移的紫罗兰色光芒。此外，还有一个完全使用 Web 音频应用程序接口构建的生成式环境音效配乐——没有音频文件，只有纯粹的 JavaScript 合成音。

在此游玩 → https://samempire1.github.io/The-Longest-Day/

视频演示

https://youtu.be/sr9KnlDWtow

代码

GitHub 仓库 → https://github.com/samempire1/The-Longest-Day

整个游戏是一个独立的 index.html 文件——没有框架，没有依赖项，没有构建步骤。只有 HTML、CSS 和原生 JavaScript。

我是如何构建它的

架构

游戏构建为一个单独的 HTML 文件，包含同时运行的三个层级：

故事引擎 —— 一个名为 STORY 的 JavaScript 数组将每个场景保存为数据对象，包含类型（transition [过渡]、narr [叙述]、cipher [密码] 或 ending [结局]）、文本内容、对话、选项、进度值和主题标签。一个 renderStep() 函数读取当前步骤并渲染相应的屏幕。这使得像编写剧本一样轻松地撰写和编辑故事成为可能。
画布背景 —— 一个 <canvas> 元素位于所有用户界面之后，并运行一个 requestAnimationFrame 循环。每个章节都有自己的主题，改变天空渐变、粒子行为和星星颜色。阿达的章节生成温暖的琥珀色粒子，像墨西哥湾海岸的热浪一样向上飘移。艾伦的章节展示寒冷的夜空和微弱脉动的月亮。索尔的章节则让柔和的紫罗兰色飘移灯光充满天空。
Web 音频应用程序接口声音引擎 —— 当玩家启用声音时，每个章节都会获得其 own 的程序化生成配乐。阿达的主题使用五声音阶正弦波旋律。艾伦的主题将紧张的锯齿波 drones 与快速的方波脉冲分层，模拟 Bombe 机器的机械节奏。索尔的主题构建缓慢的和声正弦波簇，偶尔伴有高频数字哔声。所有音频都是实时生成的——不加载任何音频文件。