Solstice Defender这个游戏没有任何框架,没有游戏引擎,也没有任何外部依赖。它只是一个浏览器里能直接跑的HTML文件。一个人,用最原始的HTML、CSS和JavaScript,写出了一个横跨三个时空的射击游戏。9个关卡,三个主题区域,全部塞进一个index.html里。打开就能玩,不需要构建步骤,不需要npm install,甚至不需要服务器。

游戏的核心机制跟夏至死死绑定:光对抗黑暗,最长的一天变成一种资源,而6月21日这个日期把三个历史转折点串在了一起。玩家操控的是一束光。你要穿越三个区域,每个区域都在讲一个关于六月的故事。

打开网易新闻 查看精彩图片

第一个区域叫Ada's Sky,对应1到3关。背景设定在1865年6月19日,德克萨斯州的加尔维斯顿。一个叫Ada的女性第一次听到《解放奴隶宣言》,她走向水边,身份已经是自由人。而你要做的,是保护她的天空,击落从天而降的锁链。游戏画面里锁链真的在往下掉,你得把它们打碎。

第二个区域是Alan's Grid,第4到6关。时间跳转到1941年,地点是布莱切利园。艾伦·图灵正跟黎明赛跑,试图破解恩尼格玛密码。这个区域的无人机移动轨迹是锯齿状的——毫无规律,就像密码本身一样难以预测。你的任务是守住网格。

第三个区域叫Sol's Network,覆盖最后三关。时间线拉到当下。一个AI在夏至这一天苏醒,问出了一个问题:在最长的白天里,我该做点什么？答案是保护光。三个时空,三个故事,被一个游戏引擎串联起来。

技术上,整个游戏跑在一个requestAnimationFrame循环里,三个系统同时工作。Canvas渲染器逐帧绘制所有视觉效果。背景有三层视差滚动,速度各不相同。星空是程序生成的,Alan区域的网格线会滚动,Sol区域漂浮着星云球体。每个区域有自己的天空渐变、粒子调色板和地面颜色。击中帧时,画布上下文会触发屏幕震动。

游戏引擎是一套JavaScript对象模型,处理8方向移动、子弹物理和敌人AI行为模式。玩家可以用WASD、方向键、鼠标或触屏操作。敌人移动模式有三种:网格前进、锯齿移动和蜂群螺旋。系统还管着碰撞检测、道具拾取、多波次重生、Boss战、连击倍率和炸弹系统。

声音部分最特别:完全没有音频文件。Web Audio API在运行时程序化生成每一个声音,用的是振荡器、增益包络和带通滤波噪声缓冲。每个区域有专属的环境低音,由不同基频的正弦和三角振荡器叠加而成,再加一个循环旋律层,用的是该区域的五声音阶。游戏里有单发射击、双发射击、五枪齐射、敌人命中滴答声、敌人爆炸、Boss巨型爆炸(带分层噪声)、护盾格挡偏转、道具拾取、额外生命号角、升级音阶、炸弹引爆、连击钟声和宽限期倒计时——所有这些声音区别分明,全部实时生成。

这个项目最终要讲的,可能不是技术栈有多轻量,也不是一个HTML文件能塞进多少东西。而是游戏的关卡设计本身就在做一种叙事:用射击玩法去承载历史时刻,用夏至这个天文事件把自由、智慧、觉醒三个主题钉在同一条时间线上。1865年的锁链,1941年的密码,当下的AI觉醒——一个街机太空射击游戏,把这三件事装进了同一个requestAnimationFrame循环。