Javascript p5.js中矩形对象的网格

我正在尝试创建一个路径查找迷宫，在那里我们可以在矩形对象的网格上添加源、目标和墙。通过单击矩形对象可以添加源、目标和墙。我在p5.js中编写了以下代码

var行=20；
var-cols=20；
var源=0；
var目的地=0；
var grid=新阵列（cols）；
函数设置（）{
createCanvas（400400）；
对于（var i=0；i，导致单击的网格不着色的问题在显示功能中

         display(x,y){
           rect(x,y,20,20);
           fill(this.value);
         }

请注意，
fill
在
rect
之后调用，这会导致网格矩形根据上一个节点进行填充

要获得要填充的单击网格矩形，请按如下顺序切换调用：

         display(x,y){
           fill(this.value);
           rect(x,y,20,20);
         }

可以重写代码，使节点对象包含其自己的填充值和坐标。这将使网格节点的颜色和位置之间的联系更加明显。
与您的问题无关，但一般建议：始终最好尝试正确设置代码格式。否则很难读取，不仅仅是对在这种情况下，我看到的最大问题是（前导）空格/行首位置的一致性以及大括号/大括号的位置。