时间戳

首页 > 解决方案 > p5.j​​s checkers/chessboard draw with nested loop

javascript - p5.j​​s checkers/chessboard draw with nested loop

问题描述

我想打印一个国际象棋/跳棋板，并在教程的帮助下找到了这段代码。我了解除此行之外发生的所有事情：rect(i * squareSize,j * squareSize,squareSize, squareSize);

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

我的第一个直觉是填充函数下方的 if/else 语句中的矩形，而不是 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>

标签： javascriptnested-loopsp5.js

解决方案

为什么我的方法不起作用

我有点困惑：您的代码似乎工作正常。有什么不好的？

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

当你有这样的问题时，你能做的最好的事情之一就是拿出一些方格纸并画出一些例子。

假设你有一张 1000x1000 的纸，你想在上面画一个 10x20（10 列 x 20 行）的网格。

  • 每个方格的宽度是多少？每个方格的宽度为 100，因为 1000/10 = 100。
  • 第 0 列、第 1 列、第 2 列等的 x 值是多少？
    • 第 0 列的 x 值为 0，因为它是最左边的边缘。
    • 第 1 列的 x 值为 100，因为它距最左边一列（宽 100）。
    • 第 2 列的 x 值为 200，因为它距最左边两列。
  • 每个正方形有多高？每个方格宽 50，因为 1000/20 = 50。
  • 第 0 行、第 1 行、第 2 行等的 y 值是多少？
    • 第 0 行的 y 值为 0，因为它是最顶端的边缘。
    • 第 1 行的 y 值为 50，因为它距离最顶部边缘只有一行（宽 50）。
    • 第 2 行的 y 值为 100，因为它距离最顶部边缘有两行。

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

如果这仍然不清楚，请尝试绘制一些示例。

推荐阅读