这是什么
之前我提到过，一直会维护一个我个人的平台：https://www.cnblogs.com/weipt0106/p/20867788
我在自己的「个人专属大杂烩平台」上，用 AI 原生开发的方式做了两款游戏------没有搬运开源代码，没有引入游戏引擎，从物理碰撞到音效合成全部手写。
两款游戏都已上线，欢迎来玩：http://122.51.205.81 （体验账号 guest / guest123，登录后进入「经典游戏」菜单）
🍄 超级玛丽（Canvas 2D）
技术栈：Canvas 2D API + Web Audio API + React 18，单文件 1184 行，零外部资源。
- 像素风全手绘 ：马里奥的帽子、徽标、胡子、背带裤，栗宝宝、金币、火球、旗杆------全部用
fillRect一个矩形一个矩形画出来，4 帧跑动动画 + 朝向镜像翻转 - 程序化 8-bit 音效 ：用方波振荡器合成经典马里奥 BGM，8 种音效（跳跃/踩怪/吃币/破砖/火球）全部
OscillatorNode实时生成，不依赖任何音频文件 - 完整关卡与物理：120 列 ASCII 字符地图、重力跳跃摩擦、移动平台、问号块掉蘑菇/金币、火球发射冷却、3 条命 + 300 秒倒计时
- 视差滚动：云朵 0.3 倍、山丘 0.5 倍，营造 2D 纵深
操作：← → 移动，Space 跳跃，X 发火球，到达旗杆通关
🏔️ 山海逃亡（Three.js 3D）
技术栈：React Three Fiber + Three.js + Web Audio，单文件 1663 行，仅 1 个 GLB 模型。
你闯入了古老的森林，惊醒了沉睡的饕餮------
- 山海经原创主题：青铜鼎做障碍、饕餮做追兵，朱砂红 + 青铜金 + 五声音阶音效，开局就是浓浓东方韵味
- 程序化纹理零图片：自实现 fBm 值噪声，用 Sobel 算子从 heightmap 推算树皮和道路的法线贴图，草地用双层噪声混合
- Lightformer 替代 HDRI：用 drei 的 Lightformer 程序化搭建环境光，零网络依赖，离线可用
- InstancedMesh 1500 株草地：单 draw call 渲染 1500 片草叶，每株独立相位随风摆动，随玩家前进而循环回收
- 曲线赛道数学 ：路径由直道/弯道/坡道随机拼接，
pathToWorld将"沿路径距离 + 车道偏移"映射为 3D 世界坐标，实现无尽跑酷 - 饕餮追逐机制：撞障碍缩短追兵距离，安全跑动拉开距离，距离过近时屏幕边缘红色脉冲危险晕染
- 三类障碍三种应对：石头跳跃、枯木滑铲、青铜鼎变道
- 道具系统：金币（含稀有紫色）、加速块、氮气桶，localStorage 存最佳记录
操作：← → 变道，↑ 跳跃，↓ 滑铲，Q 释放氮气
AI 原生开发是什么体验
这两款游戏的开发方式有点特殊：我没有逐行敲代码，而是用自然语言描述需求，由 AI 生成并迭代实现。
比如对山海逃亡，我会说：「用 fBm 噪声生成树皮 diffuse，再用 Sobel 算子从 heightmap 推算法线贴图」「饕餮跟在玩家后方，距离随碰撞缩短、随时间回拉，过近时加红色 radial-gradient 危险晕染」------AI 就把这些数学和渲染细节一次性写对。
结果是：单文件千行级、零外部资源、可玩的完整游戏，从渲染到音效到物理全部自研。这就是 AI 原生开发的效率。
技术栈一览
| 维度 | 超级玛丽 | 山海逃亡 |
|---|---|---|
| 渲染 | Canvas 2D 手绘 | Three.js / R3F 3D |
| 代码量 | 1184 行 | 1663 行 |
| 外部资源 | 零 | 仅 1 个 GLB 模型 |
| 音效 | Web Audio 8-bit 方波 | Web Audio 五声音阶 |
| 关卡 | ASCII 字符地图 | 程序化无尽曲线 |
| 主题 | 经典复刻 | 山海经原创 |
来玩
在线体验地址：http://122.51.205.81
账号 guest / guest123
欢迎来踩，有建议随时交流 👋