起源
一个月前，我用 AI 原生开发的方式复刻了一版超级玛丽------Canvas 2D 手绘像素、Web Audio 合成 8-bit 音效、ASCII 字符地图构建关卡，单文件 1184 行，零外部资源。
那时候它只有一关：经典的 World 1-1 地面关卡，有栗宝宝、管道、问号方块、旗杆和城堡。能玩，但总觉得少了点什么。
World 1-1：梦开始的地方
第一关：蘑菇王国的入口
第一关是经典的地面关卡，复刻了 NES 原版 World 1-1 的核心体验：
- 像素全手绘 ：马里奥的红帽子、胡子、背带裤，栗宝宝的呆萌眼神，金币的旋转光泽------全部用
fillRect一格一格画出来，4 帧跑动动画 + 朝向翻转 - 完整物理系统：重力、跳跃、摩擦、踩怪反弹、破砖块、顶问号出蘑菇
- 经典关卡布局：212 列字符地图，4 根递增管道、两组阶梯、两个坑洞，旗杆滑杆 + 走进城堡通关动画
- 三层视差背景：云朵几乎静止（0.15×）、山丘缓慢左移（0.25×）、灌木丛明显滚动（0.45×），营造 2D 纵深感
管道、坑洞、阶梯------每一处都是原版的味道
触碰旗杆，滑杆通关，走进城堡
第二关：地下迷宫与传送区
第二关是 World 1-2 地下关卡，整个画风从蓝天草地切换到蓝色砖块地下世界。这一关的花样可不少：
- 地下配色：蓝色砖块、蓝色管道、蓝色地面，天花板砖块层贯穿全程
- 升降梯：三个移动平台，需要踩准时机跳跃
- 双层通道：上层有金币阵列，下层有栗宝宝巡逻
- Warp Zone 传送区：三根管道，各自通往不同目的地------第一根回第一关，第二根重置第二关，第三根直接通关（隐藏彩蛋）
- 负一世界（Minus World）：选错管道会进入传说中的「-1 关」水下世界，低重力漂浮、四只Blooper鱼追踪你、气泡粒子特效，致敬原版最著名的 bug
地下关卡：蓝色砖块、升降梯、天花板层
Warp Zone：三根管道，选对直接通关，选错进入负一世界
通关路线：地下走到最右端出口管道 → 按 ↓ 进入地面段 → 旗杆 → 城堡 → 进入第三关。
第三关：高空树顶的终极挑战
第三关是 World 1-3 高空树顶关卡，难度大幅提升：
- 无连续地面：全程悬浮平台 + 深渊，掉下去就是一条命
- 蘑菇平台：经典红色蘑菇造型平台，高低错落
- 飞龟（Paratroopa）：绿色乌龟长翅膀，正弦曲线弹跳飞行，踩一次变普通乌龟，再踩变龟壳
- 8 级阶梯：终点前的经典上升阶梯，致敬原版
- 远景树冠视差：双层深绿色树冠滚动，营造高空纵深感
高空树顶平台、蘑菇平台、飞龟------掉下去就是深渊
第三关等你来挑战，终点有惊喜 🎮
AI 原生开发：我是怎么做的
这三关游戏，我没有逐行敲过一行代码。
我的开发方式是：用自然语言描述需求，由 AI（TRAE IDE）生成并迭代实现。比如我会说：
- 「World 1-2 地下关卡，150 列，蓝色砖块配色，天花板砖块层贯穿，col 128-129 放出口管道，按 DOWN 进入地面段」
- 「负一世界水下关卡：低重力（重力减半）、跳跃变上浮、4 只 Blooper 鱼追踪玩家 y 坐标、20 个气泡粒子从底部上升」
- 「飞龟 AI：baseY + sin(flyPhase) * amplitude 做正弦弹跳，踩一次掉翅膀变普通乌龟，再踩变龟壳」
AI 就把这些关卡布局、物理参数、敌人 AI、渲染逻辑一次性写对。我负责描述需求、审查代码、反馈调整。
技术栈
| 维度 | 实现 |
|---|---|
| 渲染 | Canvas 2D API，全手绘像素 |
| 框架 | React 18 + TypeScript |
| 代码量 | 3100+ 行，单文件 |
| 外部资源 | 零（音效全部 Web Audio 合成） |
| 关卡 | 3 关（World 1-1 / 1-2 / 1-3） |
| 敌人 | 栗宝宝、绿龟、红龟、飞龟、Blooper 鱼 |
| 彩蛋 | Warp Zone 传送、负一世界水下关卡 |
来玩
在线体验地址：http://122.51.205.81
账号 guest / guest123，登录后进入「经典游戏」菜单。
操作：← → 移动，Space 跳跃，X 发火球，↓ 进入管道
三关全部可通关。第三关终点有惊喜，等你来冲关 🍄