JS实现康威生命游戏报Uncaught TypeError: this.activeArray[i]未定义错误

问题排查与解决方案 #

1. 构造函数列计算逻辑错误 #

你在计算columns时误将除法运算符写成了赋值运算符：

// 错误写法
this.columns = Math.floor(canvas.width = this.cellSize);
// 修正为
this.columns = Math.floor(canvas.width / this.cellSize);

这个错误会导致canvas.width被强制修改为cellSize的值，最终columns取值异常，引发后续数组访问越界。

2. 方法调用顺序错误 #

你提到的报错本质是this.activeArray[i]为undefined，访问其[j]属性自然抛出类型错误。请确认执行顺序：必须先调用arraysInit()完成数组初始化，再调用drawCells()方法，如果实例化Game后直接调用绘制方法，activeArray还是空数组，必然报错。

3. 双数组赋值逻辑错误 #

康威生命游戏需要两个独立的数组分别存储当前轮和下一轮的状态，你当前的写法是浅拷贝：

// 错误写法，两个变量指向同一个数组
this.inactiveArray = this.activeArray;

修改为深拷贝逻辑，保证两个数组完全独立：

// 修正写法，逐层拷贝数组内容
this.inactiveArray = this.activeArray.map(row => [...row]);

否则后续更新状态时会同时修改两个数组的值，完全无法实现双缓冲的效果。

4. 绘制坐标逻辑错误（非报错原因，影响显示效果） #

fillRect的前两个参数是X轴坐标、Y轴坐标，你当前把行索引对应X、列索引对应Y，会导致绘制出来的细胞矩阵旋转90度，修正为：

ctx.fillRect(j * this.cellSize, i * this.cellSize, this.cellSize, this.cellSize);

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