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

2048

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

功能特性

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

安装指南

环境要求

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

安装步骤

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

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

使用说明

基本操作

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

游戏规则

1. 每次移动会在空位随机生成一个数字2或4
2. 相同数字的方块在移动时会合并成它们的和
3. 当棋盘填满且无法合并时游戏结束
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智能小助手）
对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号（网络安全技术点滴分享）

公众号二维码

公众号二维码