基于HTML Canvas的康威生命游戏无限网格滚动优化问询

你的核心问题是每次滚动都要遍历整个活跃单元格集合，做字符串拆分、坐标计算、创建新Set，单元格数量上来后必然性能拉胯。最直接高效的优化是维护一个全局滚动偏移量，完全不动活跃单元格的原始坐标，具体步骤如下：

1. 新增全局偏移量 #

在你的game对象里添加两个属性，用来记录当前的滚动偏移：

// 初始化游戏时设置
game.scrollX = 0;
game.scrollY = 0;

2. 修改滚动逻辑，直接更新偏移量 #

彻底删掉scrollCells方法，滚动时只需要修改偏移量，不用碰任何单元格：

const Scroll = {
  SCROLL_INCREMENT: 5,

  up: function (game, event) {
    if (event.key !== 'ArrowUp') return;
    game.scrollY += this.SCROLL_INCREMENT;
  },
  down: function (game, event) {
    if (event.key !== 'ArrowDown') return;
    game.scrollY -= this.SCROLL_INCREMENT;
  },
  left: function (game, event) {
    if (event.key !== 'ArrowLeft') return;
    game.scrollX += this.SCROLL_INCREMENT;
  },
  right: function (game, event) {
    if (event.key !== 'ArrowRight') return;
    game.scrollX -= this.SCROLL_INCREMENT;
  }
};

3. 调整绘制逻辑，用偏移量计算画布位置 #

之前你用ctx.translate()没起作用，是因为没结合偏移量正确使用。现在绘制时有两种高效方式：

方式一：用偏移量修正单元格绘制坐标 #

遍历活跃单元格时，用原始坐标减去偏移量得到画布上的位置：

// 假设每个单元格大小是cellSize
function drawCells(ctx, game, cellSize) {
  for (const coord of game.activeCells) {
    const [x, y] = coord.split(",").map(Number);
    // 计算画布上的位置：原始坐标 - 滚动偏移
    const drawX = (x - game.scrollX) * cellSize;
    const drawY = (y - game.scrollY) * cellSize;
    ctx.fillRect(drawX, drawY, cellSize, cellSize);
  }
}

方式二：利用ctx.translate()简化计算（更高效） #

绘制前先通过translate偏移画布坐标系，这样直接用原始坐标绘制即可：

function drawCells(ctx, game, cellSize) {
  // 保存当前画布状态，避免影响后续绘制
  ctx.save();
  // 偏移坐标系：抵消滚动效果，相当于画布往反方向移动
  ctx.translate(-game.scrollX * cellSize, -game.scrollY * cellSize);
  
  for (const coord of game.activeCells) {
    const [x, y] = coord.split(",").map(Number);
    // 直接用原始坐标绘制，无需额外计算
    ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
  }
  
  // 恢复画布原始状态
  ctx.restore();
}

4. 额外优化：减少字符串解析开销 #

如果单元格数量极大，每次绘制时拆分字符串会有额外开销，可以在创建单元格时就处理好坐标格式：

• 要么在存入Set前把坐标转成数组（注意Set存数组是按引用，需确保每个坐标是唯一实例，或用JSON.stringify统一格式）
• 要么维护一个并行的数组集合，批量存储坐标的数值形式，避免重复解析

这样优化后，滚动操作从O(n)变成O(1)，完全不用遍历修改单元格集合，性能会有质的提升，逻辑也更简洁。

内容的提问来源于stack exchange，提问作者yomama