2048 是一款风靡全球的数字合并解谜小游戏，此条目为其开源网页实现（克隆版），源自原作《1024》的玩法…

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

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

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

仓库怎么组织

代码按功能分目录，style 存 CSS，js 存 JavaScript 逻辑，meta 存元数据。js 文件按依赖顺序排列，形成自底向上的调用链，从底层输入处理到顶层游戏管理。这种组织方式符合游戏开发中各模块解耦的需求，便于维护和扩展。

从哪个文件开始读

从 js/application.js 开始读，它是顶层入口，负责初始化游戏流程。因为它整合了所有核心模块，如输入管理、界面渲染和游戏逻辑，是理解整体架构的起点。

阅读路线

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

  1. js/application.js —— 盯 GameManager 实例化和 setup 调用，看它是如何启动游戏循环
  2. js/keyboard_input_manager.js —— 盯 on 和 emit 函数，看输入如何被捕获并传递给 GameManager
  3. js/html_actuator.js —— 盯 actuate 函数，看游戏状态如何反映到 UI 上
  4. js/grid.js —— 盯 insertTile 和 removeTile，看游戏核心数据结构如何操作
  5. js/game_manager.js —— 盯 move 和 actuate 调用，看游戏逻辑的核心循环

值得抄的实现

  • GameManager.prototype.setup 和 addStartTiles 展示了游戏初始化的抽象设计，将随机生成和状态初始化分离处理
  • HTMLActuator.prototype.applyClasses 和 normalizePosition 体现了 UI 更新的组织方式，通过类名组合动态调整样式
  • KeyboardInputManager.prototype.on 和 emit 揭示了事件驱动架构的核心逻辑，将输入映射到游戏行为

先看一眼它的形状

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

js/keyboard_input_manager.js 第 1 行：

function KeyboardInputManager() {this.events = {};

js/html_actuator.js 第 1 行：

function HTMLActuator() {this.tileContainer    = document.querySelector(".tile-container");this.scoreContainer   = document.querySelector(".score-container");

这游戏是什么

游戏在 4×4 的方格上进行，玩家滑动方块让相同数字合并翻倍，界面简洁、规则极简，却有着令人上瘾的深度，曾引发全球性刷屏热潮，并在各平台上被大量移植和改编。开源代码托管在 GitHub，可本地运行或部署成网页版。

基本信息

  • 一句话简介：《1024》的克隆版，基于 Saming 的《2048》
  • 源码：2048

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

版权与免责

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