经典 2048 游戏：数字合并的益智挑战

作者：qife122

2025-09-28
福建
本文字数：2107 字
阅读完需：约 7 分钟

2048

2048 是一款基于 JavaScript 开发的经典数字益智游戏，灵感来源于 1024 游戏和 Threes 游戏。玩家通过方向键移动数字方块，当两个相同数字的方块相碰时会合并成它们的和，目标是创建出 2048 这个数字方块。

功能特性

🎮 直观的游戏玩法：使用键盘方向键或触摸滑动操作数字方块
📱 跨平台支持：完美支持桌面端和移动端设备
💾 本地存储：自动保存游戏进度和最高分记录
🎯 智能动画：流畅的方块移动和合并动画效果
🔄 游戏控制：支持重新开始和继续游戏功能
♿ 多种操作方式：支持键盘快捷键（WASD、方向键、Vim 键位）

安装指南

环境要求

现代 Web 浏览器（Chrome、Firefox、Safari、Edge 等）
支持 JavaScript 和 CSS3 的浏览器环境

安装步骤

下载项目文件到本地目录
使用 HTTP 服务器托管文件（如 Python 的http.server、Node.js 的 http-server 等）
在浏览器中访问 index.html 文件

或直接访问在线版本：http://git.io/2048

使用说明

基本操作

桌面端：使用方向键（↑↓←→）或 WASD 键移动方块
移动端：通过触摸滑动屏幕来移动方块
重新开始：点击"New Game"按钮或按 R 键
继续游戏：达到 2048 后可以选择继续挑战更高分数

游戏规则

每次移动会在空位随机生成一个数字 2 或 4
相同数字的方块在移动时会合并成它们的和
当棋盘填满且无法合并时游戏结束
达到 2048 方块即可获胜，可选择继续游戏

核心代码

游戏管理器 (GameManager)

function GameManager(size, InputManager, Actuator, StorageManager) {  this.size = size; // 网格大小  this.inputManager = new InputManager;  this.storageManager = new StorageManager;  this.actuator = new Actuator;
  this.startTiles = 2; // 初始方块数量
  // 绑定事件处理  this.inputManager.on("move", this.move.bind(this));  this.inputManager.on("restart", this.restart.bind(this));  this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
  this.setup();}
// 重新开始游戏GameManager.prototype.restart = function () {  this.storageManager.clearGameState();  this.actuator.continueGame(); // 清除游戏胜利/失败消息  this.setup();};
// 获胜后继续游戏GameManager.prototype.keepPlaying = function () {  this.keepPlaying = true;  this.actuator.continueGame();};

复制代码

网格系统 (Grid)

function Grid(size, previousState) {  this.size = size;  this.cells = previousState ? this.fromState(previousState) : this.empty();}
// 构建指定大小的空网格Grid.prototype.empty = function () {  var cells = [];
  for (var x = 0; x < this.size; x++) {    var row = cells[x] = [];
    for (var y = 0; y < this.size; y++) {      row.push(null);    }  }
  return cells;};
// 查找第一个可用的随机位置Grid.prototype.randomAvailableCell = function () {  var cells = this.availableCells();
  if (cells.length) {    return cells[Math.floor(Math.random() * cells.length)];  }};

复制代码

输入管理器 (KeyboardInputManager)

function KeyboardInputManager() {  this.events = {};    // 触摸事件处理  if (window.navigator.msPointerEnabled) {    this.eventTouchstart = "MSPointerDown";    this.eventTouchmove = "MSPointerMove";    this.eventTouchend = "MSPointerUp";  } else {    this.eventTouchstart = "touchstart";    this.eventTouchmove = "touchmove";    this.eventTouchend = "touchend";  }
  this.listen();}
// 键盘和触摸事件映射KeyboardInputManager.prototype.listen = function () {  var self = this;
  var map = {    38: 0, // Up    39: 1, // Right    40: 2, // Down    37: 3, // Left    75: 0, // Vim up    76: 1, // Vim right    74: 2, // Vim down    72: 3, // Vim left    87: 0, // W    68: 1, // D    83: 2, // S    65: 3  // A  };
  // 响应方向键  document.addEventListener("keydown", function (event) {    var mapped = map[event.which];    if (mapped !== undefined) {      event.preventDefault();      self.emit("move", mapped);    }  });};

复制代码

方块对象 (Tile)

function Tile(position, value) {  this.x = position.x;  this.y = position.y;  this.value = value || 2; // 默认值为2
  this.previousPosition = null;  this.mergedFrom = null; // 跟踪合并的方块}
// 保存位置信息Tile.prototype.savePosition = function () {  this.previousPosition = { x: this.x, y: this.y };};
// 更新位置Tile.prototype.updatePosition = function (position) {  this.x = position.x;  this.y = position.y;};

复制代码

这些核心代码展示了 2048 游戏的基本架构，包括游戏状态管理、用户输入处理、网格系统和方块对象的实现，为理解游戏运行机制提供了清晰的代码基础。更多精彩内容请关注我的个人公众号公众号（办公 AI 智能小助手）对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号（网络安全技术点滴分享）

公众号二维码

办公AI智能小助手

公众号二维码

网络安全技术点滴分享

发布于: 刚刚阅读数: 3

qife122

关注

还未添加个人签名 2021-05-19 加入

还未添加个人简介

发布

暂无评论

创作场景

经典 2048 游戏：数字合并的益智挑战

2048

功能特性

安装指南

环境要求

安装步骤

使用说明

基本操作

游戏规则

核心代码

游戏管理器 (GameManager)

网格系统 (Grid)

输入管理器 (KeyboardInputManager)

方块对象 (Tile)

qife122

评论