当前位置：首页 > JavaScript

用js实现1024

2026-04-04 15:13:08JavaScript

以下是使用JavaScript实现1024游戏的几种方法：

核心逻辑实现

游戏板通常用二维数组表示，每个格子初始为0或随机生成2/4：

const board = Array(4).fill().map(() => Array(4).fill(0));

初始化游戏

随机在空白位置生成两个数字（2或4）：

function addRandomTile() {
  const emptyCells = [];
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 4; c++) {
      if (board[r][c] === 0) emptyCells.push({r, c});
    }
  }
  if (emptyCells.length > 0) {
    const {r, c} = emptyCells[Math.floor(Math.random() * emptyCells.length)];
    board[r][c] = Math.random() < 0.9 ? 2 : 4;
  }
}

移动逻辑

向左移动的典型实现（其他方向类似）：

function moveLeft() {
  let moved = false;
  for (let r = 0; r < 4; r++) {
    // 移除零并合并相同数字
    const row = board[r].filter(x => x !== 0);
    for (let i = 0; i < row.length - 1; i++) {
      if (row[i] === row[i+1]) {
        row[i] *= 2;
        row[i+1] = 0;
        moved = true;
      }
    }
    const newRow = row.filter(x => x !== 0).concat(Array(4-row.length).fill(0));
    moved = moved || !arraysEqual(board[r], newRow);
    board[r] = newRow.slice(0, 4);
  }
  return moved;
}

游戏状态检查

判断游戏是否结束：

function isGameOver() {
  // 检查是否有空格
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 4; c++) {
      if (board[r][c] === 0) return false;
    }
  }
  // 检查是否还能合并
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 4; c++) {
      if (c < 3 && board[r][c] === board[r][c+1]) return false;
      if (r < 3 && board[r][c] === board[r+1][c]) return false;
    }
  }
  return true;
}

完整实现建议

使用事件监听处理键盘输入（上下左右箭头）
每次移动后添加新方块并更新UI
添加分数计算逻辑（每次合并时累加）
实现重新开始功能

可视化实现

可使用HTML/CSS创建4x4网格，通过DOM操作更新数字显示：

function updateView() {
  const container = document.getElementById('game-board');
  container.innerHTML = '';
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 4; c++) {
      const tile = document.createElement('div');
      tile.className = `tile value-${board[r][c]}`;
      tile.textContent = board[r][c] || '';
      container.appendChild(tile);
    }
  }
}

完整实现需要结合HTML结构和CSS样式，建议参考开源项目如：

用js实现1024