JS Canvas渲染异常：6×6网格全显蓝色而非中心2×2蓝色

核心错误 #

你的cellColor函数里误用了赋值运算符=，而非比较运算符===：

return cell.obstacle = true ? "rgb(0,0,250)" : "rgb(125, 125, 125)";

这段代码会强制把所有单元格的obstacle属性设为true，且赋值表达式的结果始终为true，导致所有单元格都返回蓝色。

修复代码 #

将赋值运算符替换为比较运算符即可：

let cellColor = function (cell) {
  return cell.obstacle === true ? "rgb(0,0,250)" : "rgb(125, 125, 125)";
};

也可以简化成更简洁的写法：

let cellColor = function (cell) {
  return cell.obstacle ? "rgb(0,0,250)" : "rgb(125, 125, 125)";
};

额外优化建议 #

• 初始化后循环设置所有obstacle为false的代码可以删除，因为Cell构造函数已经默认将该属性设为false。
• drawGrid调用时的嵌套map完全多余，直接传入grid即可：drawGrid(grid);

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