code.org for循环不画线javascript

Question

好的，因此在code.org的游戏实验室中，它们提供了一个预制函数，称为“ line（）;”。它应绘制一条源于给定x1 y1和x2 y2坐标的线。当我尝试创建一个for循环，该循环允许我在同一个y像素上绘制3个线段时，for循环只是在draw循环内永久运行（但不正确，它只是将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()四次。
• 绘制（每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;
  }
}

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

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

• 绘制（第一次）：绘制背景，然后绘制线条。每次绘制一条线时，您都会向spaceXPos添加20，但是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
    );
  }
}