Изменить цвет последовательного эллипса в цикле - PullRequest
Новая
       52

Изменить цвет последовательного эллипса в цикле

0 голосов
/ 14 мая 2018

поэтому для этого проекта мне нужно изменить цвет каждого эллипса, чтобы он отличался от цвета эллипса до него и оставался таким до тех пор, пока он не сойдет с холста и не будет сброшен.Я прокомментировал несколько вещей, которые попробовал, но, похоже, это не сработало.

Вот подсказка моего инструктора: когда вы используете цикл для создания объектов, ваша переменная подсчета меняется каждый раз, когда вы проходите черезцикл, так что вы можете использовать это, чтобы помочь создать цвета, которые также различны в каждом цикле.Но не используйте случайный, так как это заставит цвета меняться каждый раз, вместо того, чтобы просто гарантировать, что каждый тайл / монстр отличается от своих соседей, но всегда один и тот же цвет.Например, если самая первая плитка синего цвета, а вторая - зеленого, они всегда должны быть синего и зеленого цвета.

Буду признателен за любую помощь или совет, который вы можете дать.Я занимался этим несколько часов и, кажется, ударил блок, чтобы я мог использовать несколько свежих глаз. 

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

1 Ответ

0 голосов
/ 15 мая 2018

В вашем коде есть только один monster.Это объект с атрибутами (x position, y position, color, ...). Вам нужен массив monsters.

In 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.Это то, что вам нужно для того, чтобы сделать это правильно, и это будет очень полезно для будущих улучшений вашей программы.Проверьте видео Даниэля Шиффмана с 6.1 по 7.3 об этом , если вы хотите простой обзор предмета

...