用 Claude Opus 5.5 生成的三个 3D 网页游戏：本地构建与试玩教程

项目简介

claude-opus-5-5-demo 是一次 Claude Opus 5.5 代码生成能力实验。仓库包含三个可以直接游玩的 3D 网页游戏，每个项目都只使用一句提示词，在单个 Claude Code 会话中完成资料检索、工程搭建、编码、构建、测试与部署。

根据仓库说明，三个游戏的源码均由模型生成，人工没有修改代码。项目使用 Three.js 构建 3D 场景，再通过 esbuild 将程序打包并内联到单个 HTML 文件中。模型、纹理、动画和音效全部由代码程序化生成，不依赖外部图片、音频或第三方素材。

这不是传统的游戏开发模板，而是一组可运行、可构建、可检查的 one-shot 代码生成实验成果。

三个游戏及其特色

鹈鹕骑自行车

这是一个海岸公路休闲骑行游戏。玩家控制戴着头盔和墨镜、系着红围巾的鹈鹕骑车抓鱼。项目包含布料物理围巾、海浪与岸边碎浪、昼夜循环、程序化音效和音乐，以及根据帧率自动调整画质的机制。

• W、S：加速和减速。
• A、D：变道并接近鱼。
• 空格：跳跃。
• T：展翅并抬起前轮。
• 自动驾驶：长时间不操作时，鹈鹕会自动追鱼。

游戏还提供 14 个成就、5 种镜头模式、触屏按钮，以及跟随踏频变化的浏览器实时合成音乐。

在线体验鹈鹕骑自行车

穿越火线·运输船

该项目尝试还原《穿越火线》经典运输船地图。生成过程中先检索布局图和攻略，再根据长条形甲板、两端船舱出生点、中部 V 形斜放集装箱及两侧单向管道等特征搭建场景。

玩法包括枪械弹道、后坐力、机器人 AI 对战、命中反馈、击杀播报、程序化枪声与其他音效，同时支持触屏操作。

在线体验穿越火线·运输船

QQ 飞车

竞速项目还原了 Shift 漂移、Ctrl 氮气、小喷、双喷和复位等操作，并提供四张按照官方地图风格设计的赛道。

• 十一城：城市夜景赛道，包含 11 处弯道和发卡弯。
• 情迷爱琴海：以爬坡和连续弯道为主要特点。
• 法老金字塔：在直道末端设置跳台。
• 雪地大冒险：采用 8 字形立交结构。

正式开发前，赛道形状先通过脚本生成俯视图，以检查弯道布局与交叉点。

在线体验 QQ 飞车

开始前的准备

本地构建需要能够运行 npm 和 Node.js 脚本的环境。仓库不保存 node_modules/ 和 dist/，因此克隆或下载源码后，需要分别为准备体验的游戏安装依赖并执行构建。

三个子工程相互独立，可以只构建其中一个，也可以逐个构建。它们的主要依赖包括 Three.js 和 esbuild。

仓库结构

pelican-bike/
  src/
  index.template.html
  build.mjs
  package.json

cf-transport-ship/
  src/
  build.mjs
  package.json

qq-speed/
  src/
  build.mjs
  wrangler.jsonc
  package.json

pelican-bike/src/ 包含 11 个模块，涉及鹈鹕、自行车、海洋、鱼、天空、特效和音频等功能。cf-transport-ship/src/ 包含 18 个模块，覆盖地图、枪械、武器、机器人、玩家、物理和第一人称武器模型。qq-speed/src/ 包含 15 个模块，涉及车辆、赛道、布局、AI、地图和道具。

安装与构建

方法一：构建鹈鹕骑自行车

cd pelican-bike
npm install
node build.mjs

方法二：构建穿越火线·运输船

cd cf-transport-ship
npm install
node build.mjs

方法三：构建 QQ 飞车

cd qq-speed
npm install
node build.mjs

每个项目构建完成后，产物都会写入对应目录下的 dist/index.html。按照仓库提供的使用方式，直接使用浏览器打开这个文件即可游玩。

三个构建产物的体积大约为 700 KB 至 840 KB。由于 JavaScript 已被打包进 HTML，运行时不需要再加载游戏模型、纹理或音效资源。

基本使用流程

1. 从三个子目录中选择一个游戏。
2. 进入对应目录并运行 npm install。
3. 执行 node build.mjs。
4. 确认生成了 dist/index.html。
5. 使用浏览器打开该文件。
6. 根据游戏类型使用键盘或触屏控件开始游玩。

如果只是希望快速体验，而不准备检查源码或重新构建，可以直接打开项目已经部署到 Cloudflare Pages 或 CDN 的在线地址。

理解单文件构建方式

这里的“单文件 HTML”指最终页面将打包后的 JavaScript 内联进 HTML。src/ 仍然按功能拆分为多个模块，方便开发和维护；执行 build.mjs 后，esbuild 再将这些模块合并为浏览器可运行的产物。

鹈鹕项目还使用 index.template.html 作为页面模板，在构建时注入打包后的 JavaScript 和 og:image。仓库只提交源文件，因此修改源码后需要重新运行构建脚本，才能得到新的 dist/index.html。

进阶阅读与调试建议

按模块定位功能

阅读代码时不必从完整构建产物开始。可以先根据目录中的模块名称定位功能：例如在鹈鹕项目中检查海洋、天空、音频或特效模块；在 FPS 项目中检查枪械、机器人、玩家和物理模块；在竞速项目中检查车辆、赛道、AI 与地图布局。

修改后始终重新构建

开发时应修改 src/ 中的源文件，而不是把 dist/index.html 当作主要源码。完成修改后再次执行：

node build.mjs

由于 dist/ 不入库，重新克隆仓库或清理工作目录后也需要再次构建。

进行长时间稳定性检查

仓库记录显示，鹈鹕游戏曾接受 320 秒快进浸泡测试，以覆盖完整昼夜循环，并观察几何体数量、纹理数量和 JavaScript 堆内存是否稳定。还专门测试了 36 千米里程取模边界。

如果你修改了无限道路、昼夜系统、粒子、海面或纹理逻辑，可以采用类似思路：长时间运行游戏，观察资源数量是否持续增长，并测试里程、计时和循环动画的临界点。

检查无效数值对后处理的影响

项目上线后曾出现偶发黑屏。记录显示，问题通过注入 NaN 被复现，最终定位为 Bloom 后处理会将无效像素扩散成黑块。修复方式包括在泛光前增加清理 pass，并处理海面菲涅尔等无效数值来源。

这说明修改着色器、海面、光照或后处理代码时，不仅要检查语法错误，还应留意计算结果是否可能产生 NaN 或其他无效值。

验证操作与完整对局

原项目使用无头浏览器检查页面加载、运行错误和模拟按键，并运行完整对局。扩展游戏逻辑后，可以重点验证启动流程、键位响应、胜负条件、复位行为和长时间运行状态，而不是只确认首页能够显示。

部署时保留单文件优势

构建产物是独立的 dist/index.html，适合放到静态页面托管服务。仓库中的三个游戏已经部署到 Cloudflare Pages；其中 qq-speed/ 还包含 wrangler.jsonc 部署配置。实际发布前应先在本地确认构建产物能够正常打开，再处理项目创建、域名绑定、缓存刷新和证书状态。

项目边界与说明

• 三个游戏是 Claude Opus 5.5 在 Claude Code 中生成的能力测试作品。
• 仓库说明的生成环境使用 1M 上下文和 xhigh 推理强度。
• 每个游戏只输入一句需求提示词，并在单个会话中完成。
• 《穿越火线》和《QQ 飞车》相关项目属于致敬性质的能力测试，与原厂无关。
• 仓库标注的生成时间为 2026 年 9 月。

总结

claude-opus-5-5-demo 展示了从一句提示词生成完整 3D 网页游戏的结果，也提供了可检查的模块化源码和统一构建流程。选择任意子项目，安装依赖并运行 node build.mjs，即可得到可直接打开的单文件 HTML。进一步学习时，可以重点研究程序化资源生成、游戏模块拆分、长时间稳定性测试以及 WebGL 后处理的异常值防护。