p5.js 中的矩形对象网格

Question

我正在尝试创建一个寻路迷宫，我们可以在其中添加源、目的地和矩形网格上的墙壁 objects.The 我们可以通过单击矩形 [=] 添加源、目的地和墙壁22=]在p5.js.

写了下面的代码

    var rows = 20;
    var cols = 20;
    var source =0;
    var destination =0;
    var grid = new Array(cols);

    function setup() {
         createCanvas(400, 400);
         for(var i=0;i<cols ; i++)
         {
          grid[i] = new Array(rows);
         }
         for(var j=0;j<cols;j++)
          {
         for(var k=0;k<rows;k++)
            {
         grid[j][k] = new node();

            }
         }

         }
       function draw()
       {
        for(var j=0;j<cols;j++)
         {
           for(var k=0;k<rows;k++)
           {
          grid[j][k].display(j*20,k*20);

            }
          }
       }
     function mouseClicked()
     {
       for(var j=0;j<cols;j++)
       {
          for(var k=0;k<rows;k++)
          {

         if((mouseX > (j)*20 && mouseX< (j+1) *20 )&& (mouseY > (k)*20 && mouseY< (k+1) *20 ))
           {
          grid[j][k].clicked();
           }

           }
         }
         }
     class node
          {constructor()
              {this.value =255 ;}

          display(x,y){
            rect(x,y,20,20);
            fill(this.value);
                       }
      clicked() {
          if(source == 1 ){
          this.value = color(242, 39, 39);
           source = 0;
          }
          else if(destination ==1){
          this.value =color(254,200 ,150);
          destination = 0;
           }
         else{if (this.value === 0) {
         this.value = 255;
          } else {
          this.value = 0;
          }  }}}
          function sourceee(){
                if (source=== 0) {
                           source = 1;
                         } else {
                            source = 0;
                                }
                              }
                 function destinations(){
                           if (destination=== 0) {
                                       destination = 1;
                                              } else {
                                        destination = 0;
                                        }
                                        }

此代码首先创建一个一维数组，我将其命名为 cols。然后我使用循环将数组作为行添加到数组中。所以每个列都有行数。现在每个数组都分配了一个 class 节点的对象。所以 i,j 组合唯一标识 draw() 中的特定 object.Next 我通过使用 loops.The 显示函数获取 x,y 提供 j,k 值来调用网格中每个对象的显示函数position 作为参数并使用 rect() 函数给我一个正方形。我提供的参数乘以标识我的对象的唯一行和列的 20。高度和宽度均为 20,20，因此它创建了一个大小为 20*20.The 的正方形 mouseclicked() 函数应该为我单击的对象着色 upon.Now 这里的错误为它下面的对象着色 instead.I 不能使用对我的 k 值执行 -1 的 hack，因为那样它永远不会在我的网格的第一行工作。

根据我的理解，我尝试了所有不同的方法问题与对象在网格中的排列有关对象 [1][0] 似乎排列在 [0][0] 之前，但我不知道不知道具体是什么代码错误

支持HTML代码：

    <!DOCTYPE html>
      <html lang="">

      <head>
         <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <title>p5.js example</title>
     <style>
            body {
            padding: 0;
           margin: 0;
               }
           #src{
               top:500px;
               left:10px;
               position:absolute;
               }
        #des{
             top:500px;
             left:100px;
              position: absolute;
               }
            #gri{
               top:500px;
               left:200px;
                position: absolute;
              }

             </style>
              <script src="../p5.js"></script>
                <script src="../addons/p5.sound.min.js"></script>
               <script src="sketch.js"></script>
           </head>

               <body>
              <main>
              </main>
                <button type="button" id= "src" onclick="sourceee()">Source</button>
                <button type="button" id= "des" onclick="destinations()">Destination</button>
           </body>
           <script>

           </script>
            </html>

Answer 1

导致点击的网格不着色的问题在显示函数中

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

注意 fill 在 rect 之后被调用，这会导致根据前一个节点填充网格矩形。

要让单击的网格矩形被填充，请像这样切换调用顺序：

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

可以重写代码，使节点对象包含自己的填充值和坐标。这样可以使网格节点的颜色和位置之间的联系更加明显。

p5.js 中的矩形对象网格

Grid of rectangle objects in p5.js

javascript

p5.js