第一关：蘑菇王国的入口
第一关是经典的地面关卡，复刻了 NES 原版 World 1-1 的核心体验：
像素全手绘：马里奥的红帽子、胡子、背带裤，栗宝宝的呆萌眼神，金币的旋转光泽——全部用 fillRect 一格一格画出来，4 帧跑动动画 + 朝向翻转
完整物理系统：重力、跳跃、摩擦、踩怪反弹、破砖块、顶问号出蘑菇
经典关卡布局：212 列字符地图，4 根递增管道、两组阶梯、两个坑洞，旗杆滑杆 + 走进城堡通关动画
三层视差背景：云朵几乎静止（0.15×）、山丘缓慢左移（0.25×）、灌木丛明显滚动（0.45×），营造 2D 纵深感
超级玛丽1-2_line.png
管道、坑洞、阶梯——每一处都是原版的味道
超级玛丽1-3_line.png
触碰旗杆，滑杆通关，走进城堡
第二关：地下迷宫与传送区
第二关是 World 1-2 地下关卡，整个画风从蓝天草地切换到蓝色砖块地下世界。这一关的花样可不少：
地下配色：蓝色砖块、蓝色管道、蓝色地面，天花板砖块层贯穿全程
升降梯：三个移动平台，需要踩准时机跳跃
双层通道：上层有金币阵列，下层有栗宝宝巡逻
Warp Zone 传送区：三根管道，各自通往不同目的地——第一根回第一关，第二根重置第二关，第三根直接通关（隐藏彩蛋）
负一世界（Minus World）：选错管道会进入传说中的「-1 关」水下世界，低重力漂浮、四只Blooper鱼追踪你、气泡粒子特效，致敬原版最著名的 bug
超级玛丽2-1_line.png
地下关卡：蓝色砖块、升降梯、天花板层
超级玛丽2-2_line.png
Warp Zone：三根管道，选对直接通关，选错进入负一世界
通关路线：地下走到最右端出口管道 → 按 ↓ 进入地面段 → 旗杆 → 城堡 → 进入第三关。
第三关：高空树顶的终极挑战
第三关是 World 1-3 高空树顶关卡，难度大幅提升：
无连续地面：全程悬浮平台 + 深渊，掉下去就是一条命
蘑菇平台：经典红色蘑菇造型平台，高低错落
飞龟（Paratroopa）：绿色乌龟长翅膀，正弦曲线弹跳飞行，踩一次变普通乌龟，再踩变龟壳
8 级阶梯：终点前的经典上升阶梯，致敬原版
远景树冠视差：双层深绿色树冠滚动，营造高空纵深感
马里奥3-1_line.png
高空树顶平台、蘑菇平台、飞龟——掉下去就是深渊
第三关等你来挑战，终点有惊喜 🎮
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 传送、负一世界水下关卡
来玩