游戏厅：马力欧兄弟，被 JS 重写的 1985 经典

这是经典平台游戏《超级马力欧兄弟》的开源复刻项目，用 Backbone 游戏引擎实现了一个关卡。

「游戏厅」栏目，每期只讲一款游戏：它是什么、怎么玩、它用的是什么技术。

先说清楚：这里只有源码，没有游戏文件

本文介绍的项目指向一个真实存在的源码仓库。仓库里只有代码：要自己装环境、自己编译；不少经典游戏的重实现项目，原版素材还要自备。它的价值在「能读、能改」，不在「下载即玩」。

仓库怎么组织

代码按功能分目录，docs 存文档，super-mario-bros 存游戏特定数据，src 是核心逻辑，其余目录存辅助模块。src/core.js 是核心抽象，定义了 Sprite、Engine 等基础类，world.js 处理世界逻辑，hero.js 和 character.js 是具体角色实现。这种组织方式便于模块化管理游戏对象和行为。

从哪个文件开始读

从 index.html 开始读，它是入口，定义了脚本加载顺序，揭示了依赖关系和初始化流程。先看它怎么加载 backbone 和游戏模块，理解框架和游戏的整体入口。

阅读路线

按这个顺序读，每一步都建立在上一步之上：

1. index.html —— 盯脚本加载顺序，特别是 backbone.js 和 main.js 的位置，理解框架依赖和游戏启动流程。
2. src/core.js —— 盯 Backbone.Sprite 和 Backbone.Engine 的定义，看它们如何抽象游戏对象和引擎运行机制。
3. src/world.js —— 盯 Backbone.World 和 spawnBackgroundImage 的实现，看世界如何加载背景和角色。
4. src/hero.js —— 盯 Backbone.Hero 和 update 函数，看主角状态和行为逻辑如何通过 Sprite 抽象实现。
5. super-mario-bros/level_1-1.js —— 盯关卡数据结构，看 world.js 依赖的具体关卡信息如何组织。

值得抄的实现

• Backbone.Sprite 和 initialize 函数展示了如何用 Backbone 模式封装游戏对象状态和行为。
• onAttach 和 onDetach 在 core.js 提供了模块化组件的生命周期管理方式。
• world.js 的 findCollisions 和 hero.js 的 hurt 交互体现了角色与世界的物理反应逻辑。

先看一眼它的形状

下面几段抄自仓库原文，行号对应当时的代码：

src/core.js 第 14 行：

  Backbone.Sprite = Backbone.Model.extend({
    defaults: {
      name: undefined,

src/world.js 第 13 行：

  Backbone.World = Backbone.Model.extend({
    defaults: {
      name: "",

这游戏是什么

《超级马力欧兄弟》是任天堂 1985 年在 FC 平台推出的横版卷轴平台游戏，也是电子游戏史上最具影响力的作品：水管工马力欧穿越蘑菇王国，踩扁敌人、顶砖块吃蘑菇变大、收集金币，一路营救碧奇公主。该项目以代码致敬经典，适合想了解横版平台游戏如何用 JavaScript 实现的玩家和开发者。

基本信息

• 一句话简介：用 Backbone 游戏引擎编写的一个关卡
• 源码：Super Mario Bros

（源码部分依据 martindrapeau/backbone-game-engine 的公开代码结构整理，完整读过；细节以仓库当前代码为准。）

版权与免责

• 每一条的源码许可证以各自仓库为准，二次分发与商用前请逐条核对。
• 本文只介绍项目与代码，不托管任何游戏文件，也不提供素材包。
• 收录项目版权归各自作者所有；你是作者且不希望被收录，可以联系删除。