Loops 更改循环中连续椭圆的颜色

因此，对于这个项目，我需要更改每个椭圆的颜色，使其与之前的椭圆颜色不同，并保持该颜色，直到它离开画布并重置。我评论了一些我尝试过但似乎没有成功的事情

这里是我的指导老师给出的提示：当您使用循环创建对象时，每次通过循环时，计数变量都是不同的，因此您可以使用它来帮助创建每个循环都不同的颜色。但不要使用“随机”，因为这会使颜色每次都发生变化，而不仅仅是确保每个瓷砖/怪物与其邻居不同，但颜色始终相同。例如，如果第一个磁贴是蓝色的，第二个磁贴是绿色的，则它们应该始终是蓝色和绿色的

如果你们能提供任何帮助或建议，我们将不胜感激。我已经做了几个小时了，我似乎遇到了障碍，所以我需要一些新鲜的眼睛

var monster;
var grassColor;
var dirtColor;
var tileSize;
var redDead;
var meanGreen;




function setup () {
  createCanvas(400, 400);

monster = {
    x: 0,
    y: 20,
    size: 30,
    spacing: 50,
    speed: 1,
    color: color(75, 198, 98),
    message: "Moving",
  };


  grassColor = color(122, 229, 80, 20);
  dirtColor = color(160, 104, 30);
  tileSize = 25;
  tileColor = color(145, 32, 200);
 meanGreen = color(0, 200, 155);
 redDead = {
   r: 50,
   g: 10,
   b: 35,
};

}
function draw () {
  background(grassColor);
  stroke(dirtColor);
  strokeWeight(1);

  // #4 Draw a tile floor // Bonus Challenge

for (var tileX = 0; tileX <= width; tileX += tileSize) {
for (var tileY = 0; tileY <= height; tileY += tileSize) {
    fill(tileColor);
  rect (tileX, tileY, tileSize, tileSize);

}
 }




 //#3 Make the monsters move diagonally

monster.x += monster.speed;
monster.y += monster.speed;

if (monster.y > 0){
  monster.x = monster.y;
}


// #2 Use a loop to draw copies of monster along the x-axis


 while (monster.x <= width ) {
  fill (monster.color);
   strokeWeight(1);
   stroke(dirtColor);
   ellipse(monster.x, monster.y, monster.size, monster.size);
  strokeWeight(5);
   stroke(0);
   point(monster.x + 1, monster.y + 3);
   monster.x += monster.spacing;
   //while (monster.x % 3 && monster.x <= width) {
     //monster.color = color(redDead.r, 198, 98);
    //redDead.r += 25;
   //}
 }


if (monster.x > width) {
  monster.x =0;
}

if (monster.y > height){
  monster.y = 0;
}

var怪物；
草色变种；
var-dirtColor；
瓦雷西；
雷迪德变种；
绿色；
函数设置（）{
createCanvas（400400）；
怪物={
x:0,，
y:20，
尺码：30，
间距：50，
速度：1，
颜色：颜色（7519898），
信息：“移动”，
};
grassColor=color（122,229,80,20）；
dirtColor=颜色（160、104、30）；
tileSize=25；
tileColor=颜色（145,32,200）；
平均绿色=颜色（0，200，155）；
雷德德={
r:50，
g:10，
b:35，
};
}
函数图（）{
背景（草色）；
笔划（dirtColor）；
冲程重量（1）；
//#4绘制瓷砖地板//奖金挑战
对于（var tileX=0；tileX在您的代码中只有一个
monster
。这是一个具有属性的对象（
x
position，
y
position，
color
，…），您需要的是一个
monster
数组

在
设置中
，而不是执行

  monster = {
      x: 0,
      y: 20,
      size: 30,
      spacing: 50,
      speed: 1,
      color: color(75, 198, 98),
      message: "Moving",
    };

你应该这样做

monsters = []
spacing = 50
for(var i=0; i < 8; i++) {

  monsters[i] = {
      // each positions will be different
      x: spacing * i,
      y: 20,
      size: 30,
      speed: 1,
      // each colors will be different
      color: color(random(255), random(255), random(255)),
      message: "Moving",
    };
}

显然，在这个新版本的程序中，您不需要
while
循环和
monster.x+=monster.spating；
行


这是一种不用经常修改代码的方法。但是你真的应该看看Javascript中的面向对象编程。这是你正确完成它所需要的，这对你的程序的未来改进非常有用。检查一下你是否想要一个关于这个主题的简单概述
谢谢！我正在看他的vi迪奥斯现在就来哈哈
for (var i = 0; i < monsters.length; i++) {

  monsters[i].x += monsters[i].speed;
  monsters[i].y += monsters[i].speed;
  // ...
  // all your draw code with monsters[i] insteed of monster
}