Fable5是真·神！用canvas手搓超级玛丽无bug！

我记得有一个博主特别喜欢测超级玛丽！每次出新模型就会测一下，但是每次测试都不怎么成功。

然后我也好奇，用 Fable5 测一下，没想到一次就成功了。

就是这么简简单单，轻而易举，就是一句话的事情。

我看了眼源代码，它没有引用任何外部资源，纯手搓，用了 732 行，就实现了超级玛丽第一关。

可以跳，可以跑，可以踩，可以顶，可以吃，可以死，可以跑到最后。

成果展示

说一千道一万，还不如直接来看效果，这次我要直接上视频！

大家一起来观赏一下：

我第一次看到这个结果，真的是大受震撼！

你很难想象有一个模型，可以把整个地图和规则背出来，然后为了避免 1:1 复刻的版权问题，故意做差异化设计。

游戏升级

当然，它不光能一轮出一关，同样也可以进行优化和升级。

比如第一个版本基本上 OK，但是有一个问题，跳跃有点卡顿，不跟手。

我把问题扔给它，它立马就定位了：

perl 复制代码

跳跃手感的"卡顿/滞后"通常来自两个判定缺陷，我的代码确实都有：

1. **没有输入缓冲**：落地前一瞬间按跳，输入会被吞掉，必须落地后再按一次 → 感觉"按了没反应"。
2. **没有边缘宽限（coyote time）**：刚跑出平台边缘的几帧内按跳无效 → 感觉"明明按了却掉下去"。

另外旧的 `jumpHeld` 写法要求严格"先松开再按"，和上面两个问题叠加会很明显。我改成标准的 8 帧跳跃缓冲 + 7 帧边缘宽限，按键边沿统一在逻辑帧里检测（键盘和触屏都生效）。

它很快就修复了这个问题。

更离谱的是，它自己设计了两个回归测试来验证跳跃和土狼机制！

它把代码交给我的时候，是这么说：

lua 复制代码

修好了。"卡顿滞后"的根源是两个判定太苛刻，这次都补上了：

8 帧跳跃缓冲：落地前约 0.13 秒内按下的跳跃不再被吞掉，落地瞬间自动起跳------这是之前"按了没反应、要再按一次"的主要原因。

7 帧边缘宽限（coyote time）：刚跑出平台边缘的短暂时间内按跳仍然有效，不会"明明按了却直接掉下去"。
按键改为在逻辑帧里做边沿检测，键盘和触屏按钮走同一套逻辑，连跳时也不再依赖严格的"完全松开再按"时序。

两个新的回归测试（T10 缓冲、T11 边缘宽限）都通过了，原有 9 项测试也全部重跑无回归。

我就一句话，不跟手，它做了这么多事情。

Claude 官方的网页版对话功能都已经强大到离谱了！

然后，我又提出了新的需求。

玩过《超级玛丽》的都知道，里面应该还有两个东西：一个叫乌龟，一个叫无敌星。但是我们第一版里面是没有的，Fable 也提到了这个问题，问我要不要加，那我当然说要加了，然后顺便帮我把第二关也搞一下呗！

Fable 有求必应，真的犹如神明。

我说完，它就把计划制定好了：

markdown 复制代码

**乌龟（Koopa）**------踩一下缩进壳、碰壳会踢出去、滑行的壳能撞死沿途敌人、再踩一下停住；

**无敌星**------从 ? 块弹出、落地弹跳、吃到后彩虹闪烁约 10 秒，碰谁谁死；

**第二关**------地下蓝砖主题（参考经典 1-2），通过第一关后进入。逐项改造：

这里其实有挺多活的，就光"乌龟"这个设定，就有好几个逻辑：

踩一下会缩到壳里
碰一下壳就会踢出去滑行
会撞死沿途的敌人
遇到障碍反弹
再踩一下停住

当然，在 Fable 眼里，这就是小菜一碟！

再次感到人类的智商已经被碾压了！

已经搞定了，乌龟也有了，无敌星也有了！我快要通关了！

成功进入第二关：

一只乌龟已经被我踩扁了！

我看他第二关也做得挺好的，索性让他把世界一一到四关全都给做了！

🌲 1-3 高空关

树冠平台跳跃 + 无底深渊。

引入红乌龟：会在平台边缘折返巡逻，不像绿龟那样傻走跳崖（有专项测试验证它 15 秒不掉落）。

平台下画了树干，顶部藏着一颗无敌星。

🏰 1-4 城堡关

这关料最足：

岩浆坑：碰到即死，表面有流动动画

5 根旋转火焰棒：贴地走安全、贸然起跳危险（经典的节奏考验）

库巴 Boss：在岩浆桥上巡逻、跳跃，你踏上桥后开始喷火球（进场有 1.5 秒缓冲）；火球沿桥面飞行，小跳可躲

斧子机制：跳过库巴碰到桥尾的斧子 → 桥断 → 库巴坠入岩浆 → +5000 分 → 走进城门救出公主 👑

顺手做的优化：

踩踏判定从 16 px 放宽到 22 px，低顶棚下踩怪不再误判

落地扬尘、急刹尘土两种粒子效果

无敌星道具本体加了闪烁动画

每关独立配色主题（草原蓝天 / 地下深蓝 / 高空晴空 / 城堡昏暗）

玩了一下，没毛病：

我已经成功玩到 1-3 了。

成功进入 1-4：

也是可以玩的，没毛病！

只能说，太强了。

看了它的表现，我感觉我就是一个只会说话的废物！

从最开始提出需求到最后完成四关的所有逻辑，我感觉我没啥贡献，好像就说了几句话而已。

你们肯定会好奇，是不是所有的模型都可以做到，我可以负责任地告诉你们，其他模型都不行，而且是错漏百出，如果你们有兴趣，我可以来个趣味测评。

感觉看失败的例子会更好玩！哈哈哈！我都想去开一个视频号了！

代码分析

演示部分大概就这样了。我们稍微深入看一看，看一下它的代码，分析一下它的实现原理！

我知道这种经典游戏肯定有现成的框架，但是 Fable 真的是什么都没有引用，纯手搓。

它的页面代码是这样子的：

看到没，整个页面就 24 行 CSS 样式，13 行 HTML，下面全都是 JS 代码。

作为一个十几年的"废物程序员"，我是真的很好奇，它页面那么多画面元素是怎么搞出来的！

所以让我的另一个好哥们 Codex 分析了一下：

界面主要不是用很多 HTML 元素拼出来的，而是用 <canvas> 作为画布，JavaScript 每帧把背景、地图、角色、敌人、HUD、弹窗全部画上去。

也就是整个界面和游戏逻辑都是用 JS 和 Canvas 搓出来的，这绝对是高手！

整体结构

HTML 只有几个核心元素：

bash 复制代码

<div id="wrap">
  <canvas id="game" width="800" height="480"></canvas>
  <div class="pad" id="padL">...</div>
  <div class="pad" id="padR">...</div>
</div>
<div id="hint">...</div>

其中：

canvas#game 是主游戏画面，固定内部尺寸 800x480。
#hint 是桌面端底部操作提示。
.pad 是移动端触摸按钮，左边方向键，右边跑/跳。
CSS 通过 @media (pointer:coarse) 判断触摸设备，显示虚拟按钮、隐藏提示文字。

视觉界面怎么画出来

游戏画面全部在 draw() 里完成，每帧调用一次：

scss 复制代码

function draw(){
  ctx.fillStyle = '#5c94fc';
  ctx.fillRect(0, 0, W, H);
  drawDecor();
  drawCastle();
  drawFlag();
  ...
  drawHUD();
  ...
}

绘制顺序大概是：

蓝色天空背景。
drawDecor() 画山、云、灌木。
drawCastle() 画城堡。
drawFlag() 画旗杆和旗子。
遍历地图 grid，画地面、砖块、问号块、管道、金币等。
画蘑菇、弹出金币、敌人、玩家、碎砖粒子、飘分。
drawHUD() 画顶部状态栏。
根据游戏状态画标题页、暂停页、通关页、失败页。

所以这个界面本质上是一个像素风 Canvas 渲染器。

地图实现

地图是一个二维数组：

ini 复制代码

var T = 32, ROWS = 15, COLS = 206;
var grid = [];

每个格子是 32x32 像素。grid[r][c] 存的是瓦片类型：

arduino 复制代码

// 0空 1地面 2砖 3?(金币) 4?(蘑菇) 5已用 6硬块 ...

buildLevel() 负责搭建关卡，比如：

scss 复制代码

setT(16,9,3);      // 问号金币块
pipe(28,11);       // 管道
stairUp(118,4);    // 台阶

像素角色实现

马里奥、蘑菇、敌人这些也不是图片文件，而是用字符串数组描述像素图：

ini 复制代码

var SMALL_STAND = [
"...RRRRR....",
"..RRRRRRRRR.",
"..NNNSSKS...",
...
];

每个字符代表一种颜色：

ini 复制代码

var PAL = {
  R:'#e23b1f',
  N:'#5c2e0d',
  S:'#ffc7a1',
  U:'#2858d8',
  ...
};

drawSprite() 会遍历这些字符，把非 . 的字符画成小矩形：

scss 复制代码

ctx.fillRect(...)

所以角色是"代码画出来的像素精灵"。

总结

这个界面是这样实现的：

页面布局很简单：一个 Canvas，加少量提示和移动端按钮。
游戏画面全部由 JavaScript 使用 Canvas 2D API 手绘。
地图用二维数组表示，瓦片根据数字类型绘制。
角色和敌人用字符串像素图生成，不依赖外部图片。
每帧通过 requestAnimationFrame() 更新状态并重绘画面。
横向滚动靠 camX 镜头偏移实现。
标题、暂停、通关、HUD 都是 Canvas 内部绘制出来的。

然后我故意问了一下 Codex，这个人水平怎么样？

Codex表示：

是的，这个代码水平确实不低。

它厉害的地方不在于用了高级框架，而是用一个纯 HTML 文件，把一个完整横版平台游戏的核心系统都写出来了。它不是"能跑就行"的堆代码，里面有一些游戏手感细节。这说明作者知道平台跳跃游戏为什么"手感好"。输入缓冲和 coyote time 是很多成熟平台游戏都会用的设计。

最后 Codex 还装逼一波：

不过它也不是工程化大项目的写法。它更像是一个高完成度的单文件小游戏作品：代码集中、直接、好运行，但如果继续扩展关卡、角色、资源管理，就需要拆模块、抽资源系统、做状态机和关卡编辑工具。

哈哈哈！评论大师。

既然说得这么通透，那么你自己做一个呗！

很快它给我做了一个"超级水管工"：

有那么点意思，但是很抽象，它做的不是超级玛丽，是水管工。刚出门就遇到 Bug 了，头顶上几个银币死活吃不到！

后面是一个接一个的 Bug，根本玩不到最后。

所以说，评论是一回事儿，做到又是另外一回事儿。

因为这个东西非常好玩，所以我一口气测了 9 个模型，包括了国内最厉害的模型，也包括了国外的顶级模型。

结果只能说......非常有趣！

大部分结果已经上传了：

网址：

topai.jarvisuni.com/

要不要搞个趣味测试？每一家都单独开一个帖子，看看制作过程。我觉得你看了它们的过程和结果，就大概知道它们的实力了。差距绝对不是一丁半点。