Question

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

这里是我的导师给出的提示：当你使用循环来创建对象时，每次循环时你的计数变量都不同，所以你可以使用它来帮助创建不同的颜色循环也是如此。但是不要随意使用，因为这会使颜色每次都改变，而不是仅仅确保每个瓷砖/怪物与它的邻居不同但总是相同的颜色。例如，如果第一个图块是蓝色而第二个图块是绿色，则它们应始终为蓝色和绿色。

任何可以给予的帮助或建议都将不胜感激。我已经在这里呆了几个小时了，而且我似乎碰到了一块，所以我可以用一双新鲜的眼睛。

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;
}

Answer 1

在您的代码中只有一个monster。这是一个具有属性的对象（x位置，y位置，color，...）您需要的是monsters数组。

在setup中，而不是

  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",
    };
}

现在你拥有了不同的monsters，而在draw中，您为monster数组中的每个怪物执行了monsters个对象的操作。

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
}

显然，您不需要在此新版本的程序中使用while循环和monster.x += monster.spacing;行。

这是在不修改代码的情况下执行此操作的方法。但你真的应该看看Javascript中的面向对象编程。这就是你正确地做到这一点所需要的，这对你的程序的期货改进非常有用。如果您想要对主题进行简单概述，请查看the 6.1 to 7.3 videos of Daniel Shiffman about it

在循环中更改顺序椭圆的颜色

1 个答案: