Question

我正在尝试创建一个寻找路径的迷宫，我们可以在矩形对象的网格上添加源，目标和墙壁，可以通过单击矩形对象来添加源，目标和墙壁。 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;
                                        }
                                        }

此代码首先创建一个1d数组，我将其命名为cols。然后，我使用循环将数组中的数组添加为行。因此，每个列将具有行数。现在，每个数组都分配有一个类节点的对象。所以i，j组合唯一地标识一个特定的对象。接下来在draw（）中，我通过使用循环提供j，k值来调用网格中每个对象的显示函数.display函数将x，y位置作为参数并通过使用rect（）函数给我一个平方。我提供的参数是我的唯一行和col的20乘以标识我的对象的参数。高度和宽度均为20,20，因此会创建一个大小为20 * 20的正方形。mouseclicked（）函数应该为我单击的对象着色。现在出现错误，它改为为其下方的对象着色。不要对我的k值使用-1的技巧，因为那样就无法在网格的第一行工作。

我从理解上尝试了所有不同的方法，这个问题与网格中对象的排列有关。对象[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中的矩形对象网格

1 个答案:

p5.j​​s中的矩形对象网格

1 个答案:

p5.js中的矩形对象网格