javascript - code.org for-loop 不画线 javascript

Question

好的，所以在 code.org 的游戏实验室中，他们提供了一个名为“line();”的预制函数。它应该从给定的 x1 y1 和 x2 y2 坐标绘制一条线。当我尝试创建一个允许我在同一个 y 像素上绘制 3 个线段的 for 循环时，for 循环只是在绘制循环内永远运行，（但不正确，它只是将 x2 和 y2 移动到无限），所以我把它移到了绘图循环之外，现在我根本没有得到任何输出......

var spaceXPos = 70;
var spaceXPos2 = spaceXPos + 25;

for (var i = 0; i < 4; i++){
  stroke(rgb(255, 255, 255));
  strokeWeight(2);
  line(spaceXPos, 200, spaceXPos2, 200);
  spaceXPos = spaceXPos + 20;
}

function draw() {
  background("wheat");
}

这是一个独立项目，我使用的是 code.org，因为它为动画和绘图提供了一个易于使用的屏幕，而且我也通过它学习 AP CompSci 课程。

这是游戏实验室中此代码的链接 https://studio.code.org/projects/gamelab/_w391nq3oEo62S3WOOpWg6NrMrMHNvo8n20gVMDu5hg

Answer 1

当您的line()命令在绘图循环之外时，如您发布的示例代码中，按顺序发生以下情况：

• 设置（一次）：您的设置代码（绘制循环之外的所有内容）首先运行。这包括你的for循环，它最终调用line()了四次。
• 绘制（每 33 毫秒）：您的draw()函数调用background("wheat")，绘制设置代码的输出。这种情况每秒发生很多次。

因此，您看不到任何输出（背景颜色除外），因为您的draw()函数正在绘制for循环绘制的线条。

如果，如上所述，您将for循环移入draw()，以便您的代码如下所示：

var spaceXPos = 70;
var spaceXPos2 = spaceXPos + 25;

function draw() {
  background("wheat");

  for (var i = 0; i < 4; i++){
    stroke(rgb(255, 255, 255));
    strokeWeight(2);
    line(spaceXPos, 200, spaceXPos2, 200);
    spaceXPos = spaceXPos + 20;
  }
}

...然后会发生以下情况：

• 设置（一次）： spaceXPos设置为 70，spaceXPos2设置为 95。

• 绘制（第一次）：绘制背景，然后绘制线条。每次绘制一条线时，都会将 20 添加到spaceXPos，但spaceXPos2不会更改，因此在第一次绘制调用中绘制的四条线是：

  1. line(70, 200, 95, 200)
  2. line(90, 200, 95, 200)
  3. line(110, 200, 95, 200)
  4. line(130, 200, 95, 200)

• 绘制（第二次）：再次绘制背景，然后再次绘制线条。但是， 的值spaceXPos没有被重置，所以它一直向右移动。请注意，x2值 95 没有改变，因此该行的一端停留在同一位置。

  1. line(150, 200, 95, 200)
  2. line(170, 200, 95, 200)
  3. line(190, 200, 95, 200)
  4. line(210, 200, 95, 200)

• 绘制（等等）：线的一端一直向右移动，直到它离开屏幕，并且没有更多可见的变化，所以你最终会得到这样的结果：

如果您的目标是连续绘制三个线段，则需要确保每次调用时 x1 和 x2 值都发生变化，并确保它们在每次绘制调用时都从同一位置开始。这是一种方法：

var START_X = 70;
var FIXED_Y = 200;
var WIDTH = 20;
var GAP = 5;

function draw() {
  background("wheat");

  stroke(rgb(255, 255, 255));
  strokeWeight(2);
  for (var i = 0; i < 3; i++){
    line(
      (WIDTH + GAP) * i + START_X,
      FIXED_Y,
      (WIDTH + GAP) * i + START_X + WIDTH,
      FIXED_Y
    );
  }
}