这是经典平台游戏《超级马力欧兄弟》的开源复刻项目，用 Backbone 游戏引擎实现了一个关卡。
本文拆这个复刻项目的源码：引擎怎么分层、关卡数据长什么样、从哪个文件开始读。适合想看横版平台游戏如何用 JavaScript 实现的开发者。
先说清楚：这是源码索引，不是游戏下载站
本文介绍的项目指向一个真实存在的源码仓库。仓库里只有代码：要自己装环境、自己编译；不少经典游戏的重实现项目，原版素材还要自备。它的价值在「能读、能改」，不在「下载即玩」。
仓库怎么组织
代码按功能分目录，docs 存文档，super-mario-bros 存游戏特定数据，src 是核心逻辑，其余目录存辅助模块。src/core.js 是核心抽象，定义了 Sprite、Engine 等基础类，world.js 处理世界逻辑，hero.js 和 character.js 是具体角色实现。这种组织方式便于模块化管理游戏对象和行为。
从哪个文件开始读
从 index.html 开始读，它是入口，定义了脚本加载顺序，揭示了依赖关系和初始化流程。先看它怎么加载 backbone 和游戏模块，理解框架和游戏的整体入口。
阅读路线
按这个顺序读，每一步都建立在上一步之上：
- index.html —— 盯脚本加载顺序，特别是 backbone.js 和 main.js 的位置，理解框架依赖和游戏启动流程。
- src/core.js —— 盯 Backbone.Sprite 和 Backbone.Engine 的定义，看它们如何抽象游戏对象和引擎运行机制。
- src/world.js —— 盯 Backbone.World 和 spawnBackgroundImage 的实现，看世界如何加载背景和角色。
- src/hero.js —— 盯 Backbone.Hero 和 update 函数，看主角状态和行为逻辑如何通过 Sprite 抽象实现。
- 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: "",
游戏对象继承 Backbone.Model，状态进 defaults；世界本身也是一个 Model，关卡、背景、角色都挂在世界实例上——这是整个项目最核心的一个设计取舍：复用 Backbone 的属性变更机制来驱动游戏状态，而不是自造一套状态管理。
基本信息
- 许可证：MIT，语言：JavaScript，仓库 219 star
- 一句话简介：用 Backbone 游戏引擎编写的一个关卡
- 源码：Super Mario Bros
（源码部分依据 martindrapeau/backbone-game-engine 的公开代码结构整理，完整读过；细节以仓库当前代码为准。）
版权与免责
- 每一条的源码许可证以各自仓库为准，二次分发与商用前请逐条核对。
- 本文只介绍项目与代码，不托管任何游戏文件，也不提供素材包。
- 收录项目版权归各自作者所有；你是作者且不希望被收录，可以联系删除。
