为何JS游戏坐标生成函数异常，所有坐标元素y值始终为15？

云原生阿岚

2026-8-28

问题成因

代码存在4个核心逻辑错误，导致坐标生成完全不符合预期：

数组下标逻辑完全颠倒：初始化的gameBoardCoordinates是28列（x方向）、16行（y方向）的二维数组，合法下标范围为x轴0_27、y轴015，但代码直接把累加的像素值（步长50，最大值到1400）当作数组下标使用，属于数组越界访问，根本没有命中正确的格子存储位置。
内层循环边界错误：y轴循环的终止条件误用了宽度值gameBoardWidth * 50，完全没有用到定义的高度常量gameBoardHeight，逻辑上和棋盘实际尺寸不匹配。
循环变量未声明：for循环里的x、y没有加let/const声明，会泄漏为全局变量，所有赋值操作共享同一个变量引用，循环结束后变量值会停在最后一次迭代的结果。
初始值类型错误：初始化二维数组时用fill(0)填充原始数字类型，JS中原始值无法挂载自定义属性，后续给元素赋值.x/.y的操作本身就是无效的。

你观察到的所有元素y属性值始终为15，就是以上几个问题叠加导致的异常结果，代码根本没有走到正确的坐标赋值逻辑上。

修复方案

正确逻辑应该是先遍历格子下标，再通过下标计算像素坐标，绝对不能反过来用像素值直接当数组下标，修复后代码如下：

const gameBoardWidth = 28;
const gameBoardHeight = 16;
const cellSize = 50; // 抽离格子尺寸常量，避免硬编码
// 初始化时逐格生成空对象，避免引用类型复用问题
const gameBoardCoordinates = Array.from({ length: gameBoardWidth }, () =>
  Array.from({ length: gameBoardHeight }, () => ({}))
);

const createCoordinates = () => {
  // 遍历x方向格子下标
  for (let xIndex = 0; xIndex < gameBoardWidth; xIndex++) {
    // 遍历y方向格子下标，边界使用高度常量
    for (let yIndex = 0; yIndex < gameBoardHeight; yIndex++) {
      // 像素坐标 = 格子下标 * 单格尺寸
      gameBoardCoordinates[xIndex][yIndex].x = xIndex * cellSize;
      gameBoardCoordinates[xIndex][yIndex].y = yIndex * cellSize;
    }
  }
};

// 调用验证
createCoordinates();
console.log(gameBoardCoordinates[0][0]); // 输出 {x: 0, y: 0}
console.log(gameBoardCoordinates[27][15]); // 输出 {x: 1350, y: 750}

注意：初始化存储对象的二维数组时，不要写Array(gameBoardHeight).fill({})。fill传入引用类型值时，会把同一个内存地址的对象填充到所有位置，修改任意一个元素会导致所有元素同步变化，必须用Array.from逐一生成新的空对象。

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