如何在一个框架中创建多个对象? (创意编码)

时间:2017-12-23 01:19:26

标签: javascript loops object for-loop p5.js

我一直在开始创作编码,现在遇到了一个小问题:我写了一个类,构建了一个单独的" Raindrop"并且使用数组和for循环,我设法制作了一个像雨一样的动画。但就目前而言,每帧仅产生1个雨滴。但我打算每帧产生5个雨滴。我想每帧拨课5次。

这是我的代码:

class drop {

  constructor(x,y1,y2,vel) { //constructor function

    this.vel = vel;
    this.x1 = this.x2 = x;
    this.y1 = y1;
    this.y2 = y2;
  }

  move () {
    this.y1 = this.y1 + this.vel;
    this.y2 = this.y2 + this.vel; //describing the movement of the raindrop.
  }

  show () {
    line(this.x1,this.y1,this.x2,this.y2); //show the actual raindrop

  }
 }

这就是我的课程到目前为止。由于p5.js框架,我有一个所谓的绘图功能,它一遍又一遍地循环代码(每秒60次)。多数民众赞同如下:

  function draw () {

  let randomWidth = random(0,width);
  let randomLength = random(0,40);
  let randomVelocity = random(10,15);

    let d = new drop (randomWidth,0,randomLength,randomVelocity); //pushes the drops to the array
    rain.push(d);


  for (let i = 0; i < rain.length; i++) { //for-loop to display the raindrops
    rain[i].move();
    rain[i].show();


    if (rain.length > 250) { //cap the maximum amount of array indexes
      rain.splice(i,1);
    }
  }

到目前为止,这段代码运行得非常好,每帧只有一次掉话,但是我希望下雨更重,所以掉落的频率必须增加。我对for循环并不熟悉,但我确信这可以很容易地解决。

1 个答案:

答案 0 :(得分:0)

以下是添加单个雨滴的逻辑:

let randomWidth = random(0,width);
let randomLength = random(0,40);
let randomVelocity = random(10,15);

let d = new drop (randomWidth,0,randomLength,randomVelocity); //pushes the drops to the array
rain.push(d);

如果你想创建多个雨滴,你不能把这个逻辑放在循环中吗?或者更好的是,将其移动到addRaindrop()函数并在循环内调用该函数。