code.org for循环不绘制线条javascript

Question

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

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()命令位于绘图循环之外时(如您发布的示例代码中所示)，将按顺序执行以下操作：

• Setup ()：首先运行设置代码(绘制循环之外的所有代码)。这包括您的for循环，它最终调用line() four times.
• Draw (每隔33ms):您的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;
  }
}

...then会发生以下情况：

• Setup ( 95.
• Draw )： spaceXPos设置为70，spaceXPos2设置为95.
• Draw()：绘制背景，然后绘制线条。每次绘制一条线时，您都会将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)`

​

• Draw (第二次)：再次绘制背景，然后再次绘制线条。然而，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)`

​

• Draw (依此类推)：这条线的一端一直向右移动，直到它离开屏幕，并且看不到更多的更改，所以您最终得到了类似这样的结果：

​

​

如果您的目标是在一行中绘制三条线段，则需要确保每次调用时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
    );
  }
}

​

​