用 AI 原生开发了两款经典游戏，零资源纯代码，欢迎体验 🎮

这是什么

之前我提到过，一直会维护一个我个人的平台：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

欢迎来踩，有建议随时交流 👋