Question

我想打印一个国际象棋/棋盘，并在一个教程的帮助下找到了此代码。我了解除此行以外的所有活动：rect(i * squareSize,j * squareSize,squareSize, squareSize);

我不明白的是为什么要将i乘以squareSize变量。

我的第一个直觉是在fill函数下方而不是else下方的if / else语句内的区域。

有人可以向我解释我所缺少的内容吗，为什么我的方法不起作用并且必须乘以squareSize？

我在以下代码段中添加了我的工作代码。

 const WIDTH = 400;
    const HEIGHT = 400;
    const ROWS = 10;
    const COLS = 10;
    var squareSize = WIDTH/10;
    
    function setup() { 
      createCanvas(400, 400);
    } 
    
    function draw() { 
      background(220);
      drawBoard();
    }
    
    function drawBoard(){
      for(var i = 0; i < ROWS; i++)
        {
          for(var j = 0; j < COLS; j++)
            {
              if((i+j) % 2 == 0)
              {
              fill(0);
              } 
              else 
                {
                  fill(255);
                }
              rect(i * squareSize,j * squareSize,squareSize, squareSize);
            }
        }
      noLoop();
    }

html, body {
  margin: 0;
  padding: 0;
}

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Answer 1

为什么我的方法不起作用

我有点困惑：您的代码似乎可以正常工作。什么不起作用呢？

我不明白的是为什么要将i乘以squareSize变量。

遇到这样的问题时，您可以做的最好的事情之一就是拿出一些方格纸并画出一些例子。

假设您有一张1000x1000的纸，并且想要在其上绘制10x20（10列x 20行）的网格。

每个正方形有多宽？由于1000/10 = 100，每个正方形有100个宽。
第0列，第1列，第2列等的x值是什么？
- 第0列的x值为0，因为它是最左边。
- 第1列的x值为100，因为它距最左侧的边缘只有一列（宽100）。
- 第2列的x值为200，因为它离最左边的两列。
每个正方形有多高？由于1000/20 = 50，每个正方形有50个宽。
第0行，第1行，第2行等的y值是什么？
- 第0行的y值为0，因为它是最高边缘。
- 第1行的y值为50，因为它与最顶部的边缘相距一排（宽50）。
- 第2行的y值为100，因为它与最顶部的边缘相距两行。

请注意，对于每个列和行的x和y值，我们将列或行索引（您的i和j变量）乘以列和行的大小（您的squareSize变量）。

如果仍然不清楚，请尝试列举一些示例。

带嵌套循环的p5.js跳棋/棋盘格绘制

1 个答案: