Question

我目前正在可汗学院学习Javascript课程，我在其中一项任务中遇到了一些麻烦。我已经在那里发布了这个问题，但我注意到愿意帮助那里的志愿者少了，所以我想我会问这里。我在JS Arrays（https://www.khanacademy.org/computing/computer-programming/programming/arrays/p/project-make-it-rain）上有一个Assignment，具有以下要求：

要制作下雨动画，如果我们使用数组来跟踪掉落及其不同的属性，那就最好了。   从这个简单的代码开始，并在其上构建一个酷雨动画。以下是您可以做的一些想法：


向阵列添加更多滴。

使用条件，让它们在到达底部时从顶部开始回落。

制作一系列颜色，以便每一滴都是不同的颜色。

让其他东西下雨，比如雪花（使用更多形状命令）或头像（使用图像命令）。

使其成为当用户点击时，会向阵列添加新的drop。

在程序开头使用for循环和random（）函数初始化数组。

问题1）

我已经让它在调用雨滴时使用随机颜色，但是如果你在前一个掉落屏幕之前调用它，它会覆盖前一个颜色的颜色。我试过在循环外部移动填充功能，并且在循环周围无效。有人能给我一些见解吗？我做错了什么？

问题2）

我有条件（if / else）使雨滴重新开始回到顶部，但第二次下降得慢得多，只重复一次。无法弄清楚为什么会发生这种情况的逻辑，以便＆＃34;调试＆＃34;它

当前代码：

var xPositions = [100];
var yPositions = [0];
var colors = [
    color(255, 0, 0),
    color(255, 128, 0),
    color(255, 255, 0),
    color(0, 255, 0),
    color(0, 0, 255),
    color(128, 0, 255)      
];
background(204, 247, 255);
fill(colors[Math.floor(Math.random() * colors.length)]);

// Raindrops (random color)    
draw = function() {
background(204, 247, 255);

    for (var i = 0; i < xPositions.length; i++) {
        if (yPositions[i] < 400) { // if the raindrop hasnt hit the bottom
            noStroke();
            ellipse(xPositions[i], yPositions[i], 10, 10);
            yPositions[i] += 5;
        } else { // when it hits the bottom, set the yPositions variable to 0 and restart
            ellipse(xPositions[i], yPositions.push(0), 10, 10);
            yPositions[i] += 5;
        }    
    }
};

var mouseClicked = function() {
    xPositions.push(mouseX);
    yPositions.push(mouseY);
    fill(colors[Math.floor(Math.random() * colors.length)]);
    draw();
};

Answer 1

问题1）

您需要为draw内的for循环的每次迭代对每个绘制的雨滴进行填充调用。对于雨滴在下降时保持其颜色（在绘制调用之间），您需要将其颜色存储在另一个数组中，并在创建新的数据时初始化相应的颜色。

问题2）

只需重置y数组中的y值即可重新开始。我不确定椭圆调用在您的代码中做了什么 - 见下文。

// initial raindrop values
var xPositions = [100];
var yPositions = [0];

var colors = [
  color(255, 0, 0),
  color(255, 128, 0),
  color(255, 255, 0),
  color(0, 255, 0),
  color(0, 0, 255),
  color(128, 0, 255)
];
// initialize the first raindrop to a random color
var dropColors = [colors[Math.floor(Math.random() * colors.length)]];

background(204, 247, 255);

draw = function() {
  background(204, 247, 255);

  for (var i = 0; i < xPositions.length; i++) {
    if (yPositions[i] < 400) { // if the raindrop hasnt hit the bottom
      noStroke();
      // set the fill color for this drop
      fill(dropColors[i]);
      ellipse(xPositions[i], yPositions[i], 10, 10);
      yPositions[i] += 5;
    } else { // when it hits the bottom, set the yPositions variable to 0
      yPositions[i] = 5;
    }
  }
};

var mouseClicked = function() {
  xPositions.push(mouseX);
  yPositions.push(mouseY);
  dropColors.push(colors[Math.floor(Math.random() * colors.length)]);
  draw();
};

Javascript - 数组赋值

1 个答案: